Archived topic
Troubleshooting My Sticky Secondary Menu
3 replies · Started by Michael on February 3, 2021
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
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/
Thanks so much Elvin! It works fantastic. Much appreciated.
No problem. Glad you got it sorted. :D
