About Travis Smith

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.

jQuery(document).ready(function($) {
  "use strict";
  
  // Change #nav to #subnav for Genesis default Secondary Menu
  var menu = $('#nav').find('.menu'),
		pos = menu.offset();
		
		// Add Default class
		menu.addClass('default');
		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

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:

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.

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.

Adding a top navigationn menu to a Genesis child theme is quite easy. There are a couple of approaches. First, one can simply move the primary navigation to the top.

<?php

/** Reposition the primary navigation */
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_before', 'genesis_do_nav' );

Howevever, if you are already using the primary navigation, this may not work for you and a different approach may be necessary.

The approach depends on what menus you are currently using (e.g., using both primary and secondary or just primary with secondary not registered, etc). You would need to first, register the menu and second, then, output the menu.

Register the Menu

First locate something like the following in your functions.php file.

If you don’t then, you have the default Genesis setup. This is the same as having the following in your functions.php file.

<?php

add_theme_support(
  'genesis-menus', 
	array(
		'primary'   => __( 'Primary Navigation Menu', 'child-domain' ) 
		'secondary' => __( 'Secondary Navigation Menu', 'child-domain' ) 
	)
);

So you have two options:

1. If not using the secondary navigation, you can use secondary navigation as the top menu
2. Create a new top menu navigation system

Use Secondary Navigation as Top Menu

Create Top Navigation

To create a new navigation system, you need to do the following in your functions.php:

<?php

add_theme_support(
  'genesis-menus', 
	array(
		'primary'   => __( 'Primary Navigation Menu', 'child-domain' ),
		'secondary' => __( 'Secondary Navigation Menu', 'child-domain' ), 
		'top'       => __( 'Top Navigation Menu', 'child-domain' ), 
	)
);

This will add a menu system of Top that you can find in Appearance > Menus. If you just want primary and top, remove the secondary menu from the middle.

<?php
 
add_theme_support(
  'genesis-menus', 
  array(
		'primary'   => __( 'Primary Navigation Menu', 'child-domain' ), 
		'top'       => __( 'Top Navigation Menu', 'child-domain' ), 
	)
);

Output the Menu

Finally, you will need to output the menu.

<?php

add_action( 'genesis_before', 'wps_do_top_nav' );
/**
 * Output Top Navigation
 */
function wps_do_top_nav() {
  /** Do nothing if menu not supported */
	if ( ! genesis_nav_menu_supported( 'top' ) )
		return;

	/** If menu is assigned to theme location, output */
	if ( has_nav_menu( 'top' ) ) {
		$args = array(
			'theme_location' => 'top',
			'container'      => '',
			'menu_class'     => genesis_get_option( 'nav_superfish' ) ? 'menu genesis-nav-menu menu-top superfish' : 'menu genesis-nav-menu menu-top',
			'echo'           => 0,
		);

		$nav = wp_nav_menu( $args );

		/** Wrap nav menu with div and .wrap div if applied to #nav */
		$nav_output = sprintf( '<div id="top-nav">%2$s%1$s%3$s</div>', $nav, genesis_structural_wrap( 'nav', 'open', 0 ), genesis_structural_wrap( 'nav', 'close', 0 ) );

		echo $nav_output;
	}
}

This will output your top navigation the same as you output your primary navigation with all references to nav changed to top-nav.