[Resolved] adjust transparency for sticky navigation

[allan]

hello,

how to adjust transparency for sticky navigation?

So that when I scroll, the sticky menu has a different background (ie, different transparency)

THanks

[Leo]

Hi there,

CSS is required for that currently:

.main-navigation.navigation-stick {
    background-color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[allan]

THanks….

I have a follow-up question. How do I disable Mobile navigation for all pages?

thanks,

[allan]

Hi Leo and Team,

I found out it was actually the mobile header. lol. I deactivated it via customize->header.

THanks. resolving this issue.

[Leo]

No problem!

[Derek]

Hello,

.main-navigation.navigation-stick {
background-color: #000000;
}

didn’t work for me to make my menu transparent, it just made it black. Is there a way to set opacity?

[Leo]

#000000 is black so you just have to change the color to something like this: rgba(34,34,34,0.64)

[Derek]

Oh! The last # is opacity…..

[Derek]

How can I do this on all pages? Stick and non-sticky?

nvm: .main-navigation

[Leo]

That case you can just use the customizer instead of CSS: https://docs.generatepress.com/article/colors-overview/

[Derek]

Got it ty.

[Leo]

No problem 🙂

[Author]

Posts