Recently, someone asked me to assist them with their nagging menu. Simply they wanted a menu that became fixed at the top after the user scrolled past the menu. In their case, they had a primary navigation menu at the top and then a secondary menu below the slider. So when the user scrolled past the slider to the store, the secondary menu would be fixed at the top as the user scrolled through the various store items. So I pointed them to an online tutorial by 1stwebdesigner.com (with example) that would help them get about 75% there. In some WordPress themes, this would get you all the way, but with Genesis, the JavaScript needed some massaging to be 100% correct. (NOTE: If you are reading this post on the single page, you can see this example on this page.)
The Script
First, let's review the script needed. I modified the script from 1stwebdesigner.com for Genesis themes.
This script will make the primary menu appear at the top, but if you'd like the secondary menu to appear, then change
#nav to #subnav. The rest is basic copy and paste. However, I recommend making two files: nagging-menu.js and nagging-menu.min.js.
Now, I place these two files in my js folder which is found beside my images folder in my child theme. Some people can place this within a lib (for library) or inc (for includes) folder within their child theme. Whatever you prefer, but if you change the location, be sure to change the code in functions.php (below) to match your location.
Enqueuing Script
Next, you want WordPress to enqueue the script.
| <?php | |
| add_action( 'init', 'wps_register_nagging_script' ); | |
| /** | |
| * Register Nagging script | |
| * | |
| * @uses CHILD_THEME_VERSION set this via wp_get_theme()->Version | |
| * @link https://gist.github.com/4477270 Sets Child Theme Constants via wp_get_theme() | |
| * @link https://gist.github.com/4083811 For jQuery alternative to be placed in footer | |
| */ | |
| function wps_nagging_script() { | |
| $suffix = ( WP_DEBUG || SCRIPT_DEBUG ) ? '.js' : '.min.js'; | |
| wp_enqueue_script( | |
| 'nagging-menu', | |
| get_stylesheet_directory_uri() . '/js/nagging-menu' . $suffix, | |
| array( 'jquery' ), | |
| CHILD_THEME_VERSION, // I set this via wp_get_theme()->Version, @link https://gist.github.com/4477270 | |
| true | |
| ); | |
| } |
In this function, I have a tertiary statement determining the suffix. For those of you who don't know what that is, it is a shortcut for an if-then block. For example, instead of this:
[php]
if ( WP_DEBUG || SCRIPT_DEBUG )
$suffix = '.js';
else
$suffix = '.min.js';
[/php]
We simply can write:
[php]
$suffix = ( WP_DEBUG || SCRIPT_DEBUG ) ? '.js' : '.min.js';
[/php]
This reads: "If WP_DEBUG or SCRIPT_DEBUG is true, then assign suffix variable to '.js' else assign the suffix variable to '.min.js'." So what then are WP_DEBUG or SCRIPT_DEBUG? These are WordPress constants for debugging, which all developers regardless of skill should have on while developing a site.
So, my functions-enqueue.php code enqueues the appropriate script based on whether WordPress has been optimized for output or for debugging (nothing is worse than trying to access a JavaScript file when debugging and the JS file being minimized).
However, this function enqueues this script globally on every page. Some, however, may want to not have the script on every page, so then you would register the script and enqueue it conditionally, as below.
| <?php | |
| add_action( 'init', 'wps_register_nagging_script' ); | |
| /** | |
| * Register Nagging script | |
| * | |
| * @uses CHILD_THEME_VERSION set this via wp_get_theme()->Version | |
| * @link https://gist.github.com/4477270 Sets Child Theme Constants via wp_get_theme() | |
| * @link https://gist.github.com/4083811 For jQuery alternative to be placed in footer | |
| */ | |
| function wps_register_nagging_script() { | |
| $suffix = ( WP_DEBUG || SCRIPT_DEBUG ) ? '.js' : '.min.js'; | |
| wp_register_script( | |
| 'nagging-menu', | |
| get_stylesheet_directory_uri() . '/js/nagging-menu' . $suffix, | |
| array( 'jquery' ), | |
| CHILD_THEME_VERSION, // I set this via wp_get_theme()->Version, @link https://gist.github.com/4477270 | |
| true | |
| ); | |
| } | |
| add_action( 'wp_enqueue_scripts', 'wps_nagging_script' ); | |
| /** | |
| * Enqueue Nagging script if on home/archive page | |
| */ | |
| function wps_nagging_script() { | |
| if ( is_home() || is_front_page() || is_archive() || is_tax() ) | |
| wp_enqueue_script( 'nagging-menu' ); | |
| } |
The Style
Minimally, you need this CSS to make this menu happen (though you don't really need the background possibly or the box-shadow properties).
| #nav .fixed, | |
| #subnav .fixed, | |
| .fixed { | |
| background: rgb(0,0,0); /* Fallback */ | |
| background: rgba(0,0,0,0.97); /* All modern browsers */ | |
| filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#00000000'); /* IE */ | |
| -webkit-box-shadow: 0 0 40px #222; | |
| -moz-box-shadow: 0 0 40px #222; | |
| box-shadow: 0 0 40px #222; | |
| left: 0; | |
| top: 0; | |
| position: fixed; | |
| width: 100%; | |
| } | |
| #nav .default, | |
| #subnav .default, | |
| .default { | |
| } |
You can do a whole lot here, just as 1stwebdesigner.com does, to fancy up the menu as it sits on top.
Awesome! I had been looking for a tutorial like this. I wanted something that would make the menu appear after you scroll to a certain point. But this will work even better.
Certainly much better then the fixed menu on my site right now which I just hid behind the header with a z-index hack.
Thanks for the tutorial Travis, I have added this script into a website of mine and see immediate improvement regarding navigating throughout the website 🙂
Small typo in the function name – looks like it should be
function wps_register_nagging_script()
Thanks for this very cool enhancement! Definitely adds to the site.
Travis Thanks this is the only Sticky menu tutorial that worked with my blog 🙂
Actually you are the only one who have made this possible with themes having two navigation menu.
One query :- How I can make the contents of sticky menu appear in center?
I developed a plugin for this named “GENESIS STICKY MENU” http://iniyan.in/plugins/genesis-sticky-menu/