Archived topic
How to have a sticky menu without header navigation ?
11 replies · Started by Morgan on March 24, 2021
Hi,
I would like to activate a sticky menu and keep the header configuration.
I thought it would be a simple checkbox but i don't find any option.
I think this topic is related but i don't understand how to adapt it.
Could you help me to do that please ?
Thanks,
Morgan
Hi Morgan,
If you don't need any transition animation, you could give this CSS a try:
.site-header {
position: sticky;
top: 0;
width: 100%;
z-index: 999;
}
.main-navigation {
position: sticky;
top: 112px;
width: 100%;
z-index: 999;
}
Hi Ying,
It's a way to have the minimal sticky option.
However, does it exist an option to have a real sticky menu, witht he top bar and the logo which switch in it at the begining of the menu for example ?
It currently doesn't exist.
Unfortuanlly you'll need some custom JS solution to achieve this.
Hello, i come back with this request again.
Maybe it's now possible to have the same logique than here : https://cahierdeseoul.com/ Even with a small piece of JS ?
Hi there,
for that kind of layout you could use the Sticky Navigation option in GP Premium. That can be enabled even with the Navigation as Header disabled.
The layout would require some CSS but we can probably help with that.
Hi David,
I tried to find your Sticky Navigation option in GP Premium but i didn't succeed. Where it is ?
And what is the "off canva" setting ? i don't understand the meaning of canva for the theme.
Go to Dashboard > Appearance > GeneratePress and make sure you have the Menu Plus module enabled.
Then go to Customizer > Layout > Sticky Navigation to enable it:
https://docs.generatepress.com/article/sticky-navigation/
The off canvas panel is this:
https://docs.generatepress.com/article/off-canvas-panel-overview/
It can be enabled for Desktop or Mobile or Both. It creates an overlay / slide-in menu thats activated by a Hamburger icon in the menu. The generatepress site uses the slide in option for mobile if you want to see it in action.
Ok, i already did all of the settings for sticky navigation, however, the result is really different than expected as the website given, Cahier de Seoul.
There is something to activate ?
Any chance you can link us to the site in question?
You can use the private information field.
Hi,
yes i can. I give you the link.
Thanks
1. Go to Appearance > Menus - Edit your desktop menu and under Locations check the Off Canvas Navigation.
2. Go to Customizer > Layout > Off Canvas Panel and change the Style to Slide