Underscores and Slicknav Menu

Hi, I’ll walk you through it.

1. Go to http://slicknav.com and click the Download Now button.
2. Once you have the SlickNav-master.zip file, unzip it.
3. Go to the “dist” folder.
4. Copy slicknav.css to your _s/lib folder
5. Create an additional file in this folder called _s-slicknav.css
6. Copy jquery.slicknav.min.js to your _s/js folder
7. Create an additional file in this folder called jquery.slicknav-init.js
8. Now go to your functions.php file and add this code to the bottom

// SlickNav Responsive Mobile Menu
function _s_add_slicknav() {
    /** Enqueue the SlickNav styles */
    wp_enqueue_style( 'SlickNav-CSS-main', get_template_directory_uri() . '/lib/slicknav.css', array(), '1.0.1', 'screen' );
    /** Enqueue the SlickNav JavaScript with jQuery dependency */
    wp_enqueue_script( 'SlickNav-JS-main', get_template_directory_uri() . '/js/jquery.slicknav.min.js', array( 'jquery' ), '1.0.1', true );
    /** Enqueue SlickNav initialization script with jQuery and SlickNav JavaScript main dependencies */
    wp_enqueue_script( 'SlickNav-init', get_template_directory_uri() . '/js/jquery.slicknav-init.js', array( 'jquery', 'SlickNav-JS-main' ), '1.0.1', true );
    /** Enqueue SlickNav mobile layout only styles with SlickNav CSS main dependency */
    wp_enqueue_style( 'SlickNav-layout', get_template_directory_uri() . '/lib/_s-slicknav.css', array( 'SlickNav-CSS-main' ), '1.0', 'screen' );
}

add_action('init', '_s_add_slicknav');

9. Copy and paste this into the _s-slicknav.css file you created on Step 5.

/** Hide the SlickNav menu by default */
.slicknav_menu {
    display: none;
}

/** Check for generic mobile device width of 768px ... add more as needed? */
@media screen and (max-width: 768px) {

    /** Hide those things that should not appear in mobile displays */
    div#breadcrumbs,
    nav .nav-menu {
        display: none;
    }

    nav .slicknav_menu {
        display: block;
    }
}

10. Copy and paste this into the jquery.slicknav-init.js file you created on Step 7.

/*!
 * SlickNav Responsive Mobile Menu Init File
 */
jQuery( document ).ready( function ( $ ) {
    /** Note: $() will work as an alias for jQuery() inside of this function */
    $( '.nav-menu' ).slicknav( {
        prependTo: 'nav'
    } );
} );

That should be it. Make sure to save all of your files and refresh your page.
Resize down and SlickNav should appear.

Best of luck,
Joe