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

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

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1655161
    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)

    #1655171
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1655253
    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,

    #1655304
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1655335
    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.

    #1656171
    Ying
    Staff
    Customer Support

    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.

    #1656300
    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

    #1656362
    Ying
    Staff
    Customer Support

    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 πŸ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.