I get ask this a lot when developing custom GenseisWP themes for clients. I think it’s a really cool feature to add on to your themes. So here’s how to add it to your GenesisWP theme.
First you’ll need to enqueue the script by add thing snippet to your functions.php file.
Create a new file and name it sticky-nav.js in your js folder. If you don’t have you’ll need to create that folder. Then you will copy and paste the code below and save.
Now for some CSS, you can use this code the get the placement right but dress it up on your own.
Tip: Want to have the secondary navigation sticky instead? Then switch primary to secondary and you’re in, now go try it out!
Hi, thank you so much for this tutorial. This sticky menu is not working for mobile view. How do I make it work for mobile and tablet?
You need to make sure that your navigation is coded properly for both desktop and mobile. This is only adding a js to make it “stick”.
Hi Katrina, I am using Genesis framework. So, is there any modification I need to make?
You need to create a new folder named js then create a file called sticky-nav.js copy & paste code as instructed. Add the following snippets for the function.php file and the css.
Thank you for this tutorial.
Can you write any tutorial about adding a logo in right side of primary navigation ?
I’ll look into that writing that, thanks for the suggestion.