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
#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.
Next, you want WordPress to enqueue the script.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20||
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:
if ( WP_DEBUG || SCRIPT_DEBUG ) $suffix = '.js'; else $suffix = '.min.js';
We simply can write:
$suffix = ( WP_DEBUG || SCRIPT_DEBUG ) ? '.js' : '.min.js';
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.
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.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29||
Minimally, you need this CSS to make this menu happen (though you don’t really need the background possibly or the box-shadow properties).
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19||
You can do a whole lot here, just as 1stwebdesigner.com does, to fancy up the menu as it sits on top.