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

[Cedric]

I see that there is an option to enable the sticky menu which is good however I cannot find the option to change/disable the transparency of this. I want to make the sticky menu exactly the same as the original (top of the page)

[Ying]

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 🙂

[Cedric]

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,

[Elvin]

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.

[Cedric]

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.

[Ying]

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.

[Cedric]

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

[Ying]

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 🙂

[Author]

Posts