[Resolved] Sticky Navigation Issues

[scometamus]

Dear GP Support,

hope you are well.

On my site I included a menu item (a share button) in the navigation and set it to sticky navigation plus transparency.

I wasn’t able to solve these issues so far:

1. When the sticky navigation appears when scrolling down, a thin horizontal line appears. How can I get rid of that? I plan to have a full transparent menu.

2. When scrolling down, the menu item is too close to the top. It would be nice for it to have the same spacing as before. The Customiser > Primary Navigation > Menu settings at the bottom didn’t help here. Maybe something’s overriding.

3. The button / navigation is disappearing in mobile view. I set the Off canvas panel to Off (though when turned on nothing changes), I just want the mobile and desktop navigation have the same content.

Hope my English made sense. Thanks in advance for the help!

[Ying]

Hi there,

1. Add this CSS:

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: unset;
}

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

2. Add this CSS:

nav#sticky-navigation {
    padding-top: 20px;
}

3. Go to customizer > layout > primary navigation, and set the mobile breaking point to 0

[scometamus]

Hey Ying, thanks so much!

1. That code didn’t show any effect unfortunately.

2. Worked perfectly!

3. Worked as well!

[David]

Hi there,

try this CSS for 1:

.sticky-enabled #sticky-navigation {
    box-shadow: unset;
}

[scometamus]

Fantastic, David, that worked perfectly. Thank you very much!

[David]

Glad to hear that

[Author]

Posts