How do you make the top navigation menu item sticky without transparency? (ZEAL)

Hi Cedric,

Sticky navigation background color would be the same as Primary navigation's parent items background color.

You can go to customizer > color > primary navigation, set parent items background color.

However if you want to use different background color just for sticky navigation, use this CSS:

#sticky-navigation {
    background-color: #d1d1d1;
}

Btw don't forget to upload a logo at customizer > layout > sticky navigation > Sticky Navigation Logo.

Let me know :)

Hi Ying,

Thanks for the reply, I tried to change the setting you mentioned but it ends up changing the background color of the menu names, almost like a highlight for just the words. Please see the screenshot,

Hi there,

Try this:

nav#sticky-navigation.sticky-navigation-transition {
    background-color: #d1d1d1
    padding: 30px 0;
}

The padding is optional. It was added so the sticky nav doesn't look too thin and weird.

I apologize I am probably not being specific enough, I will do my best to explain in detail what I am trying to achieve. I need the main and sticky menu to be the exact same.

1) The main navigation is located in header, so its background color can be set at customizer > colors > header > background color.

2) Add a logo at customizer > layout > sticky navigation > Sticky Navigation Logo.

3) Go to customizer > layout > header > Use Navigation as Header.
Set sticky navigation menu item height the same as primary navigation.
https://docs.generatepress.com/article/navigation-as-a-header/

Let us know how it works.

customizer > colors > header > only shows Site Title color and no background color. Here is a screenshot: https://imagebin.ca/v/5rXejV53BUTv

Also when I enabled Use Navigation As Header, the main menu background color disappears and just shows titles like this
https://imagebin.ca/v/5rXg0ntFxFhH

Oh yes, if you enabled use navigation as header, the color options will be gone :)

Have you set the menu item background color at customizer > colors > primary navigation > Parent Items > background color?

If you set the color and it doesn't work, check your Page hero color settings at appearance > elements, find the header element you are using for front page.

Let me know :)