Add a Nagging Fixed Top Menu to Your Genesis Site

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.

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.

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).

You can do a whole lot here, just as 1stwebdesigner.com does, to fancy up the menu as it sits on top.

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Comments

  1. says

    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.

  2. says

    Thanks for the tutorial Travis, I have added this script into a website of mine and see immediate improvement regarding navigating throughout the website :)

  3. essaysnark says

    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.

  4. says

    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?

Leave a Reply