How to Make a WordPress Responsive Menu with FlexNav

There are several different approaches to building a responsive menu. My favorite is the toggle menu with 3 line navicon.

wordpress responsive menu

Flexnav is a jquery plugin which allows you to implement this method easily.Its free and can be easily customized to meet your needs.

flexnav wordpress

Just follow the steps below to integrate it to your wordpress nav menu.

  1. Download FlexNav here and upload the files to your wordpress theme directory.
  2. Open your theme’s header.php file and replace wp_nav_menu with the one below.What the original twenty ten wp_nav_menu looks like this
    <?php wp_nav_menu( array( 'container_class' ='menu-header', 'theme_location' => 'primary' ) ); ?> 

    Replace with

    <div class="menu-button">Menu</div>
    <?php wp_nav_menu( array( 'theme_location' = 'primary', 'menu_class' => 'flexnav','items_wrap' => '
    <ul class="%2$s" id="%1$s" data-breakpoint="800">%3$s</ul>','container'       => '',));  ?>
    

    Save and close your header.php file.

  3. Open your functions.php file and add the code below to load scripts and styles.
    // load the css file
    wp_enqueue_style('flex', get_bloginfo('stylesheet_directory').'/flexnav/css/flexnav.css');
    
    // load the .js file
    wp_enqueue_script('flexnav', get_bloginfo('stylesheet_directory').'/flexnav/js/jquery.flexnav.min.js');
    
    // add the callback in the footer
    function flexnav_footer_script() { ?>
    <script type="text/javascript">// <![CDATA[
    $(".flexnav").flexNav();
    // ]]></script>
    <!--?php }<br ?-->add_action('wp_footer','flexnav_footer_script', 100);
    
    Important Note
    In case your jquery version is incompatible you can remove the default WordPress jQuery and load the correct one by adding this code first.
    // change jquery version
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script('jquery');
  4. Save your functions.php file and reload your browser. It should look like this:

    default

    default
    menu collapsed

    Collapsed
  5. Customize the css to match your websites design. You might need to override the css styles that originally came with flexnav.

Integrating FlexNav with WordPress is pretty straightforward. Your visitors will have a much better experience browsing your site on a mobile device.

Reply below if you successfully installed it or having some difficulties. Share this post with a like or tweet if you found it useful.

Like, Tweet and Share!

Comments are closed.
Published Last updated