Integrating responsive-nav.js into WordPress Navigation

Responsive Web Design is all the rage these days. It’s been around since 2009 but it’s really made it way into the main stream this past year. Clients are asking for it, web developers are expected to know it, and most importantly, mobile devices are more popular than ever. One big area of a website were we must be particularly attentive to is website navigation. In my book, Responsive Design with WordPress, I talk all about responsive navigation and how to make it work nicely in WordPress. In this snippet, I’m going to show you my favorite method: responsive-nav.js.

responsive-nav.js is a fantastic, and more importantly, light-weight, piece of javascript code that will automatically switch out your current, full-width navigation for an animated pull-down section on mobile. In this snippet, we will:

  1. Define our menu
  2. Enqueue responsive-nav.js and accompanying CSS
  3. Add the javascript that does the heavy lifting to our template

So let’s start with the easy part: defining our menu. In functions.php, add this code:

if ( function_exists( 'add_theme_support' ) ) { 
    add_theme_support( 'menus' );
}

Then to your header.php (or wherever you want to add the menu):

<nav class="nav-collapse">
    <?php wp_nav_menu( array('menu' => 'Main' )); ?>
</nav>

Perfect! Now you can choose the “Main” menu from the WordPress Menu admin area. Next, let’s enqueue responsive-nav.js. Head over to responsive-nav.com and download the files. I always place theme-specific javascript and it’s CSS in a folder called /js/ in the theme folder. With that in mind, open up functions.php and add this:

function resnav_scripts() {
    wp_enqueue_script('responsive-nav', get_bloginfo('stylesheet_directory').'/js/responsive-nav.js');
    wp_enqueue_style('resnav-css', get_bloginfo('stylesheet_directory').'/js/responsive-nav.css');
}
add_action( 'wp_enqueue_scripts', 'resnav_scripts' );

This will properly add the script & CSS to the of your theme. As a note, I always add a prefix to my functions to prevent conflict. I’ve chosen resnav_for this snippet. Once this is done, we can add in the javascript that actually does the switch for us. This script must be added to the footer, so we will have a separate function within functions.php for it:

function resnav_footer_script(){

 echo '<script>
           var navigation = responsiveNav(".nav-collapse", {
               label: "- navigate -"
           });
       </script>';
}
add_action( 'wp_footer', 'resnav_footer_script' );

This will print out, in the footer, the responsive-nav script that will choose our navigation based on our selector, as well as replace the default label, which is, “Menu.”

That’s it! You should have a working responsive-nav.js powered navigation menu! You (like me) may have to make some adjustments based on your theme, like with the breakpoints or selector names. I would also recommend copying the CSS from responsive-nav.css and pasting it into your style.css file. This will consolidate and require one less HTTP Request, which could be helpful for your mobile users.

About

Joe Casabona is a web developer, author, and teacher who focuses primarily on WordPress and mobile development. His upcoming book, Responsive Design with WordPress is out December 2013. He is also a Yankee fan, plays the drums, and enjoys a fine cigar from time to time. You can find him over at casabona.org or on Twitter at @jcasabona.

2 thoughts on “Integrating responsive-nav.js into WordPress Navigation

  1. Nice snippet Joe.

    You could also call the script in the footer in a single script file with all your other scripts and use the wp_enqueue_script(); function again in the first action. There would be no need to add the second action in this case. With the wp_enqueue_script(); function here is a fifth boolean parameter $in_footer that defines if the script should be used in the footer or not, if the parameter is true the script is placed before the closing tag.

  2. Joe, thanks for posting this – I’m new to jquery, have managed to get a couple of things working on sites like fittext and smooth scroll but was having trouble integrating responsive-nav.

Leave a Reply to Dan Cancel reply

Your email address will not be published. Required fields are marked *