[Resolved] Troubleshooting My Sticky Secondary Menu

[Michael]

After reviewing many of the posts on this subject I progressed to a certain point but still need a little direction. With the forum’s help I was able to make the secondary menu sticky on desktop. It looks great on Google Chrome but has some spacing issues on Firefox and Safari. That’s probably the easiest fix.

The other issue I’m finding is to make it sticky on mobile and tablet. I’ve reviewed the breakpoints at https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints but haven’t been able to apply it correctly. I’ve included a link in the private window along with credentials.

As always thanks much!

Mike

[Elvin]

Hi there,

I see you’re using .navigation-stick + .secondary-navigation selector. Try replacing + with ~.

.navigation-stick ~ .secondary-navigation {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    right: 0;
    top: 60px;
}

If you want to include the animation, consider recreating the steps done in this topic.(needs JS)
https://generatepress.com/forums/topic/sticky-second-navigation/

[Michael]

Thanks so much Elvin! It works fantastic. Much appreciated.

[Elvin]

No problem. Glad you got it sorted. 😀

[Author]

Posts