This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Transparent Menu Bar? (North)

Resolved 5 replies customizationthemetheme-north
Miles
9 years ago · Last reply by Utopia Upshire 9 years ago

Hi, I’m currently using the North Theme, and I’d like to make the menu bar semi-transparent. I saw a few other threads about this, and I was able to use rgba to make a widget background transparent. Following the Custom CSS advice from this thread, I couldnt seem to keep the regular menu bar opaque while making the sticky version trasnparent. Any thoughts? Here’s my site. Thanks.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Alex S Staff 9 years, 6 months ago

    Hi Miles,

    To clarify, that other thread is for Vantage. The CSS Andrew replied with for the header should have worked however.

    If you navigate to WP AdminAppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:

    #masthead.site-header {
	background: rgba(0, 0, 0, .5);
}

    For the navigation, please use:

    .main-navigation {
    background: rgba(0, 0, 0, .5);
}

    Or use the following if you wish to remove the background color for the navigation altogether.

    .main-navigation {
    background: none;
}

    Please note that lower is less visible and higher is more visible.
    You might also need to install the SiteOrigin CSS Editor.

  2. Miles 9 years, 6 months ago

    Thanks Alex! This worked perfectly. Also, thanks for recommending the SiteOrigin CSS Editor. It’s much more robust than Simple Custom CSS, which I was using before.

  3. Utopia Upshire 9 years, 5 months ago

    Hello!

    Thanks Alex for those instructions, but I was wondering did I do something wrong because it is not working on my site….when i inspect the page, it says “Invalid property value” next to my selector below.

    #masthead.site-header {
    background: (0, 0, 0, .5);
    }

    • Alex S Staff 9 years, 5 months ago

      Hi Utopia,

      No, I did. :( I omitted rgba.

      I’ve updated my previous post with the following CSS:

      #masthead.site-header {
	background: rgba(0, 0, 0, .5);
}
  4. Utopia Upshire 9 years, 5 months ago

    Thank you for your reply! That totally works now! :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread