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.
Transparent Menu Bar? (North)
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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.
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.
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);
}
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); }Thank you for your reply! That totally works now! :)