[Support request] How do I make navigation bar transparent?

[Emil Frølund]

I want the navigation bar to be sticky + transparent. How do I achieve that?

[Roberto Enrique]

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

[Leo]

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.

[Roberto Enrique]

That’s right. Just forgot to mention that one 🙂

[Tully]

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

[Tom]

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;
}

[Tully]

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?

[Tom]

Unfortunately not – the element needs to be fixed right away to sit on top of the element below it.

[Author]

Posts