Bob asked in Genesis Google+ community:
I would like to use News Pro child theme for a project but I would like to have a sticky menu on top. I want this to be a different menu than primary and secondary and only show when the people scroll down.
Can anyone help me with suggestions of how to achieve that?
This can be done by extending my earlier post titled, Displaying a fixed navigation menu upon scrolling down in Genesis.
In this tutorial I provide instructions for showing a designated custom menu to fade in when the user scrolls down and fade out when scrolled back to top in Genesis child theme, News Pro.
Screenshot:
Screencast:
Sticky Menu JavaScript
Create a file named sticky-menu.js having the following code and upload it under js directory (create this) under the child theme.
Note that the script is set to show the sticky menu only when viewport width is greater than 500px. This means sticky menu will not appear on mobiles. If you would like to remove this condition, delete && window.innerWidth > 500
To view the full content, please sign up for the membership.
Already a member? Log in below or here.