Site logo

Archived topic

How do I make navigation bar transparent?

7 replies · Started by Emil Frølund on January 10, 2017

Viewing posts 1–8 of 8

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.

This archived topic is closed to new replies.