Contact Us
  • Tutorial: How to add Bootstrap Collapse Navigation to your Responsive WordPress Website

    Navigation is one of the trickiest parts of Responsive Web Design. How do you deal with the horizontal menu as the screen size gets smaller? One of the most elegant solutions is to collapse the navigation at smaller screen widths and replace it with an icon that you can click to expand the nav.

    Full size navigation:

    Collapses to this at narrower breakpoints:
    Navigation collapsed at narrow breakpoint - Responsive

    This approach is preferable in Responsive Web Design because the navigation takes up much less vertical screen space and the collapsed-menu icon is understood by most people to be the way the navigation is accessed.

    In this tutorial we will use the Bootstrap framework to create our responsive navigation. Bootstrap is a collection of CSS, jQuery, JavaScript and other components that can be used as a base template for web development. Specifically, we will be using the “collapse” functionality on our WordPress menu.

    This tutorial focuses on using the Bootstrap collapse functionality in conjunction with the Genesis Framework, which already has some responsive design built into it.

    Add the Bootstrap Collapse Navigation to your Genesis WordPress site: 5 Easy Steps

    STEP 1. Download necessary components from the Bootstrap website. Customize your bootstrap to use the navbar-collapse functionality.

    The settings necessary to get the Bootstrap navbar-collapse feature to work

    The download includes compiled and minified CSS and compiled jQuery plugins.


    STEP 2. Add the customized Bootstrap folder to your active theme folder. (Make sure the folder permissions are set to 755.) The example we will use is: /wp-content/yourtheme/lib/


    STEP 3. “Enqueue” your Bootstrap CSS styles and scrips in your theme’s functions.php file.

    // ENQUEUE SCRIPS & STYLES FOR BOOTSTRAP add_action('wp_enqueue_scripts', 'bootstrap_stuff'); function bootstrap_stuff() { wp_register_style( 'bootstrap-style', get_stylesheet_directory_uri() . '/lib/bootstrap/css/bootstrap.css'); wp_enqueue_style( 'bootstrap-style' ); wp_register_script( 'bootstrap-script', get_stylesheet_directory_uri() . '/lib/bootstrap/js/bootstrap.min.js', array('jquery'), false, true ); wp_enqueue_script( 'bootstrap-script' ); }


    STEP 4. Add a filter to your theme’s navigation function in the functions.php. This will add the necessary markup to your navigation and will add the “nav toggle button.” (NOTE: This function is specifically for the Genesis Framework, but can be modified to work with other WordPress frameworks and themes.)

    // FILTER NAV TO HAVE BOOTSTRAP NECESSARY MARKUP add_filter( 'genesis_do_nav', 'override_do_nav', 10, 3 ); function override_do_nav($nav_output, $nav, $args) { echo '<div class="mobile-main-nav"><button type="button" class="click for navigation" data-toggle="collapse" data-target=".nav-collapse"> Sections</button></div>'; wp_nav_menu( array( 'menu' => 'main-menu', 'container_class' => 'navbar-content nav-collapse collapse genesis-nav-menu menu-primary', 'menu_class' => 'nav nav-tabs pull-right', 'menu_id' => 'main-menu' ) ); }


    STEP 5. Add styles to your theme’s style.css to hide the “nav toggle button” at larger breakpoints and reveal it at mobile breakpoints. Use the width you defined in bootstrap variables @navbarCollapseWidth as the media query for revealing the “nav toggle button”.

    /* BOOTSTRAP CSS */ /* HIDE NAV TOGGLE BUTTON */ .mobile-main-nav {display: none;} @media only screen and (max-width: 480px) { /* REVEAL NAV TOGGLE BUTTON */ .mobile-main-nav {display: block;} }

    You should now have a working Bootstrap collapse navigation. The Bootstrap download may have added some additional styles to your navigation that you may or may not want. Customize and style Bootstrap to your liking.

    Feel free to post questions in the comments below. Enjoy!

    Comments

    1. Hello,

      My name is Scott and I am the webmaster for joycenter.org.

      First let me say I love your site – nice and clean. I really like it. Plus your writing style is easy to understand. Thanks….

      I have been looking for a good solution to accomplish this task for a couple of weeks now. Everything I found was a couple of years old and they did not seem to work. I was super excited to find your 2013 article about this task.

      I copied the settings in the screen shots as you have them set, ensure the file permissions, etc. I followed your directions to the t.

      I am running the latest versions of WP and Genesis. And my theme is just a child theme of the Genesis theme. I know I recently updated my Genesis Framework and I am wondering if this may be creating the problem that I am having. I am attaching some before and after shots of my site.

      Please don’t get me wrong, I knew that I would need to tweak the css but this much? I just wanted to make sure that I am on the right track as i don’t want to spend a day changing the css if I don’t need too.

      Do you have any suggestions. Thanks for your help.

      Scott

      • Hello Mike!

        Thanks for your comment. I didn’t see any attached screenshots. Can you please re-send to rachel at hyperarts dot com and I’d be happy to take a look. Are you trying to add the bootstrap collapse to the joy center site? are you staging it somewhere?
        Best,
        Rachel

      • Thanks for your comment. I didn’t see any attached screenshots. Can you please re-send to rachel at hyperarts dot com and I’d be happy to take a look. Are you trying to add the bootstrap collapse to the joy center site? are you staging it somewhere?

    2. hi, I read your article and its really awesome and give me relief that there is some easy way as it it. But i am having an issue i am using header widget area to load custom menu and i want to make this navigation responsive for 480px etc. So can you guide me how can i do that?

    3. SEB GATES says:

      Hi Tim, thank you for posting this article. I installed the following plugin: http://wordpress.org/plugins/wordpress-bootstrap-css/screenshots/ which gives me the entire Bootstrap library. I then added your code to my functions.php file and also added your css rules to my style sheet. It works a dream: http://151.252.1.90/~bootgen/ The only issue I am facing is that no menu displays at all on:

      /* iPads (portrait) ———– */
      @media only screen and (max-width: 768px)

      The Genesis Menu is not there and the Bootstrap one either. Any ideas how I can get the menu to appear on different screen widths apart from 480px?

      I tried adding: /* REVEAL NAV TOGGLE BUTTON */
      .mobile-main-nav {display: block;}

      To the iPad media query in the Genesis style sheet with no luck. What can I do to make the Bootstrap mobile menu appear on the iPad?

      Thanks – Seb

    4. SEB GATES says:

      I figured it out. Just change the width in the css:

      /* BOOTSTRAP CSS */

      .mobile-main-nav {display: none;}

      @media only screen and (max-width: 975px) {

      /* REVEAL NAV TOGGLE BUTTON */

      .mobile-main-nav {display: block;}

      Thanks – I am good now. Great work.

    5. SEB GATES says:

      Is there any way to get the Bootstrap dropdown menus working on Genesis for menus over 960px?

      • My programmer Rachel says:

        I’m pretty sure this would happen in Step 1: Customize Bootstrap Collapse Functionality > step 3 (screenshot): Customize variables > @navbarCollapseWidth
        Let us know if this works for you.

    6. Pierre Farenc says:

      Can you tell me the HTML insert in the header please because i’m lost. Thank you so much.

    Speak Your Mind

    *