Archived topic
How do I make navigation bar transparent?
7 replies · Started by Emil Frølund on January 10, 2017
I want the navigation bar to be sticky + transparent. How do I achieve that?
You have to set the background opacity in your css.
I usually do like this:
#sticky-navigation {
background: rgba(255,255,255,0.9);
}
Logically if you want it fully transparent you use rgba(255,255,255,0)
to find the right rgba() color you can use this tool: http://www.hexcolortool.com/
You can see the results here: http://artomultiplo.net
Thanks Roberto.
If you want the navigation bar to be fully transparent at all times, just remove the hex value in Customizer > Colors > Primary Navigation > Background.
Let us know if this helps.
That's right. Just forgot to mention that one :-)
I have used the customiser to set colour of primary navigation bar to a transparent colour. This is working for the sticky menu, however the primary menu before scrolling down the page isn't transparent. I would like them both to look the same? http://gp.workingsheepdogtraining.com/blog/. Thanks
It is transparent, it just so happens the background behind the menu is a solid color, so it doesn't look transparent.
You could try doing something like this:
.main-navigation:not(.is_stuck) {
position: fixed;
left: 0;
right: 0;
}
Thanks Tom, that worked. It did remove the sticky menu slide in or fade in effect though. Is there a way to maintain that also?
Unfortunately not - the element needs to be fixed right away to sit on top of the element below it.