[Resolved] Transparent Main Menu Over Image

  • Author
    Posts
  • #11170

    Karen
    Participant

    Hi Andrew,

    You replied to me yesterday on this (#post-11164) but asked me to start a new thread, so here it is ๐Ÿ™‚

    I’d like a transparent background on the main menu bar for a new site I am building. I’m not using any sliders, just large static images on the pages.

    My client wants a homepage like this one: https://bit.ly/2A4Dz5s and my dev site is here: http://wordpress.karendgroves.com/.

    Is this option available in the premium version or will it need to be fixed via CSS?

    Thanks, Karen

    #11171

    Andrew Misplon
    Keymaster

    Hi Karen

    Here is a place to start from:

    @media (min-width: 1024px) {
    	.home .site-header {
    		background: rgba(255, 255, 255, 0);
    		color: #fff;
    		margin-bottom: -112px;
    	}
    
    	.home .site-header .site-branding h1.site-title {
    		color: #fff;
    	}
    
    	.home .main-navigation a {
    		color: #fff;
    	}
    }

    Further changes will probably be needed but hopefully this helps you get going.

    #11172

    Karen
    Participant

    Hi Andrew

    That worked perfectly, thanks! I made a small tweak to get it to apply to all pages (removed .home), which seems to work ok.

    @media (min-width: 1024px) {
    	.site-header {
    		background: rgba(255, 255, 255, 0);
    		color: #fff;
    		margin-bottom: -112px;
    	}
    
    	.site-header .site-branding h1.site-title {
    		color: #fff;
    	}
    
    	.main-navigation a:link,
    	.main-navigation a:active,
    	.main-navigation a:visited,
    	.main-navigation a:hover 
    	{
    		color: #fff;
    	}
    }
    • This reply was modified 3 years, 11 months ago by Karen.
    #11174

    Karen
    Participant

    Quick follow up question.

    How do I find out the page name, so for example, in your original CSS, the class was

      .home

    If I want to make this kind of change to a single interior page, called Bookings for example how do I isolate the page name/class? I was testing this on another site for a page that is not the homepage. For example, this age: http://www.emmahollandmountaintraining.co.uk/outdoor-coaching/

    Thanks, Karen

    #11177

    Andrew Misplon
    Keymaster

    Hi, sure itโ€™s in the body tag of the page. Right click and inspect and then check the body tag, itโ€™ll be something like .page-id-x

    #11178

    Karen
    Participant

    Ah, found it. Thanks for the fast response. Brilliant support Andrew!

    #11181

    Andrew Misplon
    Keymaster

    Super ๐Ÿ™‚ Glad that helped.

    All the best.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Scroll to top