Make WordPress Navbar Work With Bootstrap

5 Views

I am currently trying to code a wordpress layout using Bootstrap 3.0. Right now I’m trying to get my nav bar to work. I found the NavWalker mod by TwitterM and followed his instructions and almost succeeded.

The problem is that the navbar isn’t showing up as a one line bavbar. It’s displaying each menu item on a new line.

Read More

Here’s the code that I placed in my header after installing the walker mod (the code for that can be viewed here: http://twittem.github.io/wp-bootstrap-navwalker/): 

    <div class="navbar">
        <?php
            wp_nav_menu( array(
            'menu' => 'primary_menu',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'nav',
            'fallback_cb' => 'wp_page_menu',
            //Process nav menu using our custom nav walker
            'walker' => new wp_bootstrap_navwalker())
            );
        ?>
    </div>

A display of the issue is here on my site: http://noellesnotes.com/tester

If anyone has any suggestions, they would be GREATLY appreciated. Thanks for your time,

Noelle

Post Views: 5

Related posts

Leave a Reply

3 comments

  1. This is pretty simple, but took me about an hour to figure out.

    Just change your code to:

    wp_nav_menu( array(
        'menu'            =>      'primary_menu',
        'depth'           =>      2,
        'container_class' =>      'nav-collapse collapse navbar-responsive-collapse',
        'menu_class'      =>      'nav navbar-nav',
        'fallback_cb'     =>      '',
        'menu_id'         =>      'main-menu',
        'walker'          =>      new twitter_bootstrap_nav_walker()
    ) ); ?>

  3. The walker does work with 3.0 the issue is that you must assign the menu to your given menu name in the WordPress admin. I am working to solve this in the main script but as long as it is assigned it will work just fine.

    The issue is if a menu is not assigned in the admin it uses the wp_page_menu() fallback which does not support custom walkers.

    -Edward (@twitem)