Bootstrap Navbar under WordPress

If you’re fallen in love with Twitter Bootstrap and WordPress as I am, you’ll probably need to develop a theme with both of them and one of the first issue you will find is to have the navbar integrated with the wordpress menu managing system.

There was a nice and candy walker, written by johnmegahan that makes the hard job done in like 2 minutes of googleing πŸ™‚
Thank you John!

The limit was that it only support a double level menu. This means you can only make a dropdown, wich in BootStrap is not an anchor to a real page but only a toggler element for the openclose popup, with a list of one level.

Well to expand it is really simple: I’ve make a gist for it:

Simply copy and paste it at the end of your functions.php

As I was coding something interesting I’ve also added support for horizontal dividers element: a nice separator between two entries.
To have it simply add the class ‘divider‘ into the optional css classes field in the element of the wordpress menu.
The line will be printed before the element you gave the class.

Once registered the navbar with register_nav_menuΒ in functions.php

register_nav_menu('top-bar', __('Primary Menu'));

This is how to print the navigation bar:

This piece of code (I hope) is re-usable on every WordPress theme; it will be included in my list of everywhere present classes.
That’s all folks, let bootstrap fill your heart πŸ™‚

Update:
If you like to have the bootstrap navbar dropdown menu open on mouse over, simply use this JavaScript code somewhere after jQuery.js and bootstrap.js

  • helms

    @setola:disqus
    This is great thanks. My sub menu opens to the left of my menu. How can I change it to open to the right?

    • you’re welcome πŸ™‚

      Adding class ‘pull-right’ to the menu container should do it (unless some css issue with other floating elements)

      in my example in header.php the line:

      becomes

      • priyanshu mittal

        Hey nice post but I have one problem when there are no custom menus to display than in that case wp_page_menu must display the page menus, which it does , but how to manage same bootstrap menu styling like the one for custom menus

        • I think you can use wp_list_pages() instead of wp_page_menu().

          This is because, according with the codex (http://codex.wordpress.org/Template_Tags/wp_list_pages), wp_list_pages() accepts $args[‘walker’] as parameter.

          Basically you should achieve your goal simply by changing:

          wp_nav_menu($args);
          to:

          wp_list_pages($args);

          in your theme.

          • priyanshu mittal

            Already tried that as well but dint worked…

          • Can I have a look at your code?
            If you can send me ftpssh access to [email protected] πŸ™‚

  • Thanks for the code πŸ™‚

  • Eirik

    You saved my day! Thank you!

  • I want to use this pretty badly. My issue currently is that I’ve followed it step by step and it’s not showing my custom menu, it’s showing 3 dots in list format. Any idea? http://goo.gl/OioGg If you could help me out by telling me what I did wrong, that’d be great!

    • Well from what i can see on the front-end there is a ul > li > a structure but then the a tag is empty…

      I honestly never encountered this issue before… can you give me access to the wp-admin and to the code in some way (ftpsftpgit or a dump of you wp installation)?

      Anyway you can have some general checks:

      – if you comment out the line: ‘walker’ => new BootstrapNavMenuWalker() are the a tags filled in?
      – there is a wp menu and it is associated on the right theme_location
      – disable all plugins, just to be sure nothing else is hooking on it
      – var_dump($args) inside start_el() to check if something is passed by wp
      – use this walker on another menu in another theme_location to find out if the issue is related only on a particular menu
      – eventually make a new dumb theme where you use only this walker just to be sure there is nothing in the current theme that hooks into the menu

      have a nice debug πŸ™‚

      • Do you have an email address I can send you the info to? First time bootstrap user here so I’m having some issues getting this to work. Thanks!

        • [email protected] or the top right link ‘contacts’

          • This guy’s code is awesome! After he got it to work on my site because I made a simple mistake. All was well. The only thing, in responsive the drop down doesn’t happen! πŸ™

          • To make it responsive you have to wrap the menu around some ‘divs’ with special classes as described in the Bootstrap doc: http://twitter.github.io/bootstrap/components.html#navbar

            The main idea is:
            this walker takes care of formatting the html according to the ‘navbar’ component of Bootstrap, then you can customize it by using optional Bootstrap behaviors

            In this particular case you’ll have to add:

            <a class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
            <span class=”icon-bar”>
            <span class=”icon-bar”>
            <span class=”icon-bar”>
            </a>

            to show the ‘open menu icon’ in small screens

            and wrap the menu (called by wp_nav_menu($args);) inside:

            I hope this can help you πŸ™‚
            cheers!

          • Unfortunately I did this and it’s still not doing the drop down. Everything else worked. I’ll have to go through each line to determine, right now I have the walker hidden on mobile and just put the manual code in. It’s not a huge deal at this point if I can’t get it to work.

          • Jay

            What was the issue here? I am having the same problem.

          • as far as I remember the menu registration was missing:
            be sure you have

            register_nav_menu(‘top-bar’, __(‘Primary Menu’));

            in your functions.php

    • Jakub Tylčer

      I had the same problem. It started working after I defined items in custom menu in admin (dragged categories and pages onto menu). Also, check if your menu is properly registered with register_nav_menu

      • Nice, I’ll have to check this out tonight. Thanks for the suggestion!

        • I’ve added the line of code that registers the menu to WP in the article.
          Thank you guys!

      • d

        Indeed it displays no menu content unless you create custom menu for it.

  • Jed A Lariosa

    Here’s another code for the print. If you want it to collapse on smaller screens..

    Project name

    ‘top-bar’,

    ‘depth’ => 0,

    ‘container’ => false,

    ‘menu_class’ => ‘nav’,

    ‘walker’ => new BootstrapNavMenuWalker()

    );

    wp_nav_menu($args);

    ?>

    Search.

  • Hanzi

    I have used this code it works for me.But When I add 3 sub levels that three levels shows when i click on the main menu at one time.I want to display sub menu of each relevant menu when i click on each menu.Please Help me

    • Hi Hanzi,
      do you have any link to this?

      • Hanzi

        Hi Emanuele ,

        no it is not hosted yet.:(

        this is the code i used for header file.


        ‘top_menu’,’container’ => false, ‘menu_class’=>’nav’, ‘fallback_cb’ => ‘wp_page_menu’, ‘walker’ => new twitter_bootstrap_nav_walker() )); ?>

        And the function is the same function in here(twitter_bootstrap_nav_walker). I have added 2 sub menu likes this,
        About us
        –Team

        —-Team on Work
        Contact Us
        …etc

        • I can’t see any errors here (I guess the opening and closing php tag are stripped by discuss).

          If you clink on an element and it opens multiple submenues the causes may be one of the following:

          – you have multiple submenu elements with the same id
          – you have an error in the DOM and when you click on the main item the browser proapgates the event on child elements
          – you have a javascript that propagates the event

          To debug this I’d follow this

          – Try to validate the DOM and search for errors
          – Try to remove all the javascripts that are not related to the navbar
          – Check the version of the js you’re using and eventually update to the last one

          also can you paste the printed html on http://jsfiddle.net/

          • Hanzi

            Sorry Emanuele this site is hosted i forget that but i can’t put public the site url can u pls send me ur email i ll send that.please help me to solve this

          • Hanzi

            Thank you so much for ur kindly help Emanuele Tessore .much appreciate πŸ™‚

          • You’re absolutely welcome! πŸ™‚

  • Thank you for this

  • Prince Khan

    Thank you πŸ™‚

  • Gary Dapogi

    This is great! But I have some question, it goes like this. How can I add function to add an .active class to the parent when viewing a post? I am not a PHP literate, so please be gentle on me.

    • this line of code should do it:

      $classes[] = ($item->current || $item->current_item_ancestor) ? ‘active’ : ”;

      You said you’re viewing a post… 90% of times a post doesn’t have a parent…
      Do you need something custom? What is your post parent?

      Do you have any example?

  • Mark Hallam

    Would be great if you linked to a demo page.

    • You’re welcome! πŸ™‚

    • setola

      Well for a design related aspect you can refer to bootstrap navbar documentation.
      Anyway this code is included in this website… so this is also a demo page πŸ™‚

  • rainer

    Hallo Emanuele,

    you are genius πŸ™‚

    maybe you could help me, i want to realize this menu with submenu over 2 levels.

    any idea?

    rainer

    • rainer

      Ok, i checked the Code. HTML Code for Navi with Suv level is generated, but dropdown does not work. any idea? πŸ™‚

      • Hi Rainer,

        on my side it’s working… do you have any javascript error?
        are the javascript loaded in the correct sequence? (jquery, bootastrap )

        eventually can you show me your code? (ftpwp-admin access to [email protected])

  • Martin

    Great great great thank you πŸ™‚

  • Sandy

    You saved my day… πŸ™‚ Thank you..

  • Hanzi

    Is there a way to put thumbnail in the menu title?

    • I think a solution can be adding come html code into start_el() function.
      For example something like:

      if(function_exists(‘get_the_post_thumbnail’) && has_post_thumbnail($item->object_id)){
      $item_output .= get_the_post_thumbnail($item->object_id, ‘thumbnail’));
      }

      between line 60 and 61.
      Adjust the markup according with your css (adding class, wrappers or whatever you may need for styling it)

      Then in your wp-admin set the featured image for the element.

      Remember to enable the featured image with:

      add_theme_support( ‘post-thumbnails’ );

      in your functions.php

      Let me know if it works.
      Cheers

      • Hanzi

        I need to add the thumbnail to the menu title like below.TAB01 and TAB02 is a menu .When user click on TAB 01 the tab 01 sub should be change according to the main menu..The thumbnail is activated

        • Well if the image is an icon you can simply add it by customizing the css.

          For example by adding

          .navbar ul li.the-class-for-tab-01{
          background-image: url(img/tab01-icon.png) no-repeat center left scroll transparent;
          }

          and add the-class-for-tab-01 to your menu entry class field in the wp-admin.

          This solution can be improved by using a sprite tecnique.

          Otherwhise if you need a bigger and more detailed image (like a photo of the submenu item) you can use the post thumbnail as described before.

          As far as i know it’s also possible to add a custom field to the menu entry by hooking on ‘wp_setup_nav_menu_item’. I never did it before, so I don’t have a code snippet for you… but google will certainly have it πŸ˜€

          In both cases you’ll have to bind the sub tab openingchange on first level tab click using javascript.

          • Hanzi

            Thank you for the Reply Emanuele.1st solution is not suitable for my problem.The menu image should be change when ever needed from dashboard.I ll try for the 2nd one and let you know if i can do it.Thanks again

          • Hanzi

            Thank you for the help..You have done a great job.:D

          • You’re welcome πŸ™‚

  • Denis

    Hi Emanuele,

    Great class – thank you. Just a quick note – when creating a Bootstrap (2.3.2) based theme, I had to set the menu class in the wp_nav_menu arguments to ‘nav navbar-nav’. Hope this is of use to others!

    Thanks!

  • Oleg

    Thanks for this. Question: I’m not clear on where would I add the divider class? I need vertical dividers to appear after each horizontal list item.

    • Oleg

      update, adding ‘link_after’ => ” to the menu array in the header works, but breaks if the item has a submenu since it adds a divider before the submenu . Any way to do this within your walker class?

      • Try to add an custom link with href ‘#’ and give it the ‘divider’ class.
        If you can’t see the class field take a look to the upper right corner of WP admin and search for ‘Screen Options’, then check ‘CSS Classes’.

  • 7CHP

    Hey, quick question. I’m totally fresh with WordPress, done some Bootstrap stuff, so you have to pardon my n00biness on this. But I could not get this to work, quite possibly because I have no idea what a walker class is… I tried to put some code from the link in my functions.php page along with yours, but all I got was a list of 4 dots and no links… Could you tell me what I am missing?

    Also, what are the biggest reasons and advantages for doing it this way instead of using the regular bootstrap menu (with the wp_list_pages array thingy)?

    • Hi there,
      the most important reason why I adopted this solution is because in the type of sites I usually build the navigation menΓΉ has to be edited by my customer, which generally doesn’t speak php πŸ™‚ but can drag and drop stuff around to make the menu look as he wants.

      Here’s the user guide I always link to my clients:
      http://codex.wordpress.org/WordPress_Menu_User_Guide

      Don’t be afraid of the noobness… we all were once upon a time πŸ™‚
      If you’re not familiar with WP menu system take a look to the basic doc:
      http://codex.wordpress.org/Navigation_Menus

      Anyway I bet you’re missing the menu entries πŸ™‚ but it’s only a bet, and I’m very unlucky πŸ˜€

      • 7CHP

        Thanks for the quick feedback Emanuele! I guess the site(s) I am building won’t have that possibility, so I guess I’ll just skip this for now and stick with what bootstrap has to offer πŸ™‚

        I think your bet isn’t that far off, I don’t even know where to put the menu entries!

  • sylflo

    I like Bootstrap, and I’m new to WordPress. Your tutorial really helps me. Thanks !

  • On your drop down hover jquery bit you could use a bit of straight css for that.

    This bit changes the colors hover overs on the ul and li’s and gives it a bit of opacity as well.

    /* Active class Background Color */
    .navbar .nav .active > a {
    background-color: #1c154b;
    }

    /* active class hover background */
    .navbar .nav .active > a:hover {
    background-color: #4157d4;
    }

    /* Hover Background Color of ul li item ie. menu link, also keeps the hover state active on dropdown */
    .navbar .nav > li a:hover, .navbar .nav > li:hover {
    background-color: #1c154b;
    }

    /* Text Hover Color */
    .navbar .nav > li a:hover {
    color: #fafafa;
    }

    /* Text Active Color */
    .navbar .nav .active > a, .navbar .nav .active > a:hover {
    color:white;
    }

    /* Below is used to create a normal hover over drop down for bootstrap, but also disables it for mobile devices */
    ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;/*set this to 0, else causes buggy action when hovering*/
    }

    a.menu:after, .dropdown-toggle:after {
    content: none;
    }

    /* Used for custom dropdown colors*/
    .dropdown-menu {
    background: #1c154b;
    border-radius: 0px;
    filter: alpha(opacity=92); /* internet explorer */
    -khtml-opacity: 0.92; /* khtml, old safari */
    -moz-opacity: 0.92; /* mozilla, netscape */
    opacity: 0.92; /* fx, safari, opera */
    }
    .dropdown-menu:after, .dropdown-menu:before {
    border: none !important;
    content: “” !important;
    }
    .dropdown-menu li a {
    color: #fafafa;
    }
    .dropdown-menu li:hover a:hover {
    color: #151515;
    background: #efefef;
    }

  • KVPearse

    Hi Emanuel, I was hoping to use this class but was unable to find any license details about it. Have you stated any?

    • Hi KVPearse
      I’ve added CC By 4.0 license
      Feel free to use, edit and share it at the only price of maintaining the authors attribution.

      Any linkback to this page or website is welcome but not mandatory πŸ™‚

      Cheers

  • Hanzi

    Hi Emanuele, Thank you for the support given previously. I need your support again. I want to add menu like below image.I have implemented twitter bootstrap class but there are some errors.
    Fuction.php
    class BootstrapNavMenuWalker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth, $args = array()) {

    $indent = str_repeat( “t”, $depth );

    if($args->has_children && $depth > 0) {

    $output .= “n$indent n”;

    }elseif($args->has_children && $depth == 0){

    $output .= “n$indent

    n”;}

    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;

    $indent = ( $depth ) ? str_repeat( “t”, $depth ) : ”;

    if (strcasecmp($item->title, ‘divider’)) {

    $class_names = $value = ”;

    $classes[] = ($item->current) ? ‘active’ : ”;

    if($args->has_children && $depth === 0) {

    $class_names .= ‘dropdown yamm-fullwidth’;

    }

    else if($item->ID==’77’)

    {

    $class_names.=’menu-item menu-item-type-post_type menu-item-object-page page_item page-item-19 current-menu-item current_page_item menu-item-‘ . $item->ID.” ;

    }

    $class =$class_names?’ class=”‘ . esc_attr( $class_names ) . ‘”‘ :”;

    if ($item->ID==’77’)

    {

    $output .= $indent . ”;

    }elseif($args->has_children && $depth== 0) {

    $output .= $indent . ”;}

    else if($args->has_children && $depth > 0 && $item->ID!=’510′)

    {

    $output .= ”;

    }

    elseif($args->has_children && $depth > 0 && $item->ID!=’509′) {

    $output .= ”;

    }

    elseif($args->has_children && $depth > 0){

    $output .= ‘ID .’>’;

    }

    $attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;

    $attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;

    $attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;

    $attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;

    $attributes .= ($args->has_children) ? ‘ data-toggle=”dropdown” data-target=”#” class=”dropdown-toggle”‘ : ”;

    if( $item->ID==’510’) {

    $item_output = $args->before;

    $item_output .= apply_filters( ‘the_title’, $item->title, $item->ID );

    }

    elseif( $item->ID==’509′) {

    $item_output = $args->before;

    $item_output .= apply_filters( ‘the_title’, $item->title, $item->ID );

    }

    else{

    $output .= ‘ID .’>’;

    $item_output = $args->before;

    $item_output .= ‘‘;

    $item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;

    $item_output .= ($args->has_children && $depth == 0) ? ‘ ‘ : ‘‘;

    $item_output .= $args->after;

    }

    $output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );

    } else {

    $output .= $indent . ”;

    }

    }

    function end_lvl( &$output, $depth,$args = array() )

    {

    $output .= “”;

    }

    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

    if ( !$element ) {

    return;

    }

    $id_field = $this->db_fields[‘id’];

    //display this element

    if ( is_array( $args[0] ) )

    $args[0][‘has_children’] = ! empty( $children_elements[$element->$id_field] );

    else if ( is_object( $args[0] ) )

    $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );

    $cb_args = array_merge( array(&$output, $element, $depth), $args);

    call_user_func_array(array(&$this, ‘start_el’), $cb_args);

    $id = $element->$id_field;

    // descend only when the depth is right and there are childrens for this element

    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

    foreach( $children_elements[ $id ] as $child ){

    if ( !isset($newlevel) ) {

    $newlevel = true;

    //start the child delimiter

    $cb_args = array_merge( array(&$output, $depth), $args);

    call_user_func_array(array(&$this, ‘start_lvl’), $cb_args);

    }

    $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );

    }

    unset( $children_elements[ $id ] );

    }

    if ( isset($newlevel) && $newlevel ){

    //end the child delimiter

    $cb_args = array_merge( array(&$output, $depth), $args);

    call_user_func_array(array(&$this, ‘end_lvl’), $cb_args);

    }

    //end this element

    $cb_args = array_merge( array(&$output, $element, $depth), $args);

    call_user_func_array(array(&$this, ‘end_el’), $cb_args);

    }

    }

    header.php

    ‘main_menu’,’container’ => false, ‘menu_class’=>’nav navbar-nav navbar-right’, ‘fallback_cb’ => ‘wp_page_menu’, ‘walker’ => new special_nav_walker() )); ?>

    this is the html of what i want,

    Home

    Products

    A

    Apple

    Areo

    Ant

    B

    Bat

    Ball

    Bus

    C

    Cat

    Car

    Resources

    Contact

    • Daniel

      I copied the code and adjusted the menu name and everything works except the javascript does not auto show the submenus and the top level pages (I mean the pages that are the dropdown toggle) cannot be clicked in order to get to that page.

      Can you help me out here? I appreciate it.

      • Daniel

        The comment I reply to now should be on the main level of comments – not a reply. Sorry for that.

      • Well first of all check that the submenues are present in the DOM,
        then check if there is any javascript error in the console.

        firebug or chrome dev tools will be useful

        if notthing comes up leave me a link to your development environment, i’ll check it

  • Hanzi

    Hi Emanuele, Thank you for the support given previously. I need your support again. I want to add menu like below image.I have implemented twitter bootstrap class but there are some errors.
    Fuction.php
    class BootstrapNavMenuWalker extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth, $args = array()) {

    $indent = str_repeat( “t”, $depth );

    if($args->has_children && $depth > 0) {

    $output .= “n$indent n”;

    }elseif($args->has_children && $depth == 0){

    $output .= “n$indent

    n”;}

    }

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;

    $indent = ( $depth ) ? str_repeat( “t”, $depth ) : ”;

    if (strcasecmp($item->title, ‘divider’)) {

    $class_names = $value = ”;

    $classes[] = ($item->current) ? ‘active’ : ”;

    if($args->has_children && $depth === 0) {

    $class_names .= ‘dropdown yamm-fullwidth’;

    }

    else if($item->ID==’77’)

    {

    $class_names.=’menu-item menu-item-type-post_type menu-item-object-page page_item page-item-19 current-menu-item current_page_item menu-item-‘ . $item->ID.” ;

    }

    $class =$class_names?’ class=”‘ . esc_attr( $class_names ) . ‘”‘ :”;

    if ($item->ID==’77’)

    {

    $output .= $indent . ”;

    }elseif($args->has_children && $depth== 0) {

    $output .= $indent . ”;}

    else if($args->has_children && $depth > 0 && $item->ID!=’510′)

    {

    $output .= ”;

    }

    elseif($args->has_children && $depth > 0 && $item->ID!=’509′) {

    $output .= ”;

    }

    elseif($args->has_children && $depth > 0){

    $output .= ‘ID .’>’;

    }

    $attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .'”‘ : ”;

    $attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .'”‘ : ”;

    $attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .'”‘ : ”;

    $attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .'”‘ : ”;

    $attributes .= ($args->has_children) ? ‘ data-toggle=”dropdown” data-target=”#” class=”dropdown-toggle”‘ : ”;

    if( $item->ID==’510’) {

    $item_output = $args->before;

    $item_output .= apply_filters( ‘the_title’, $item->title, $item->ID );

    }

    elseif( $item->ID==’509′) {

    $item_output = $args->before;

    $item_output .= apply_filters( ‘the_title’, $item->title, $item->ID );

    }

    else{

    $output .= ‘ID .’>’;

    $item_output = $args->before;

    $item_output .= ‘‘;

    $item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;

    $item_output .= ($args->has_children && $depth == 0) ? ‘ ‘ : ”;

    $item_output .= $args->after;

    }

    $output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );

    } else {

    $output .= $indent . ”;

    }

    }

    function end_lvl( &$output, $depth,$args = array() )

    {

    $output .= “”;

    }

    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

    if ( !$element ) {

    return;

    }

    $id_field = $this->db_fields[‘id’];

    //display this element

    if ( is_array( $args[0] ) )

    $args[0][‘has_children’] = ! empty( $children_elements[$element->$id_field] );

    else if ( is_object( $args[0] ) )

    $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );

    $cb_args = array_merge( array(&$output, $element, $depth), $args);

    call_user_func_array(array(&$this, ‘start_el’), $cb_args);

    $id = $element->$id_field;

    // descend only when the depth is right and there are childrens for this element

    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

    foreach( $children_elements[ $id ] as $child ){

    if ( !isset($newlevel) ) {

    $newlevel = true;

    //start the child delimiter

    $cb_args = array_merge( array(&$output, $depth), $args);

    call_user_func_array(array(&$this, ‘start_lvl’), $cb_args);

    }

    $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );

    }

    unset( $children_elements[ $id ] );

    }

    if ( isset($newlevel) && $newlevel ){

    //end the child delimiter

    $cb_args = array_merge( array(&$output, $depth), $args);

    call_user_func_array(array(&$this, ‘end_lvl’), $cb_args);

    }

    //end this element

    $cb_args = array_merge( array(&$output, $element, $depth), $args);

    call_user_func_array(array(&$this, ‘end_el’), $cb_args);

    }

    }

    header.php

    ‘main_menu’,’container’ => false, ‘menu_class’=>’nav navbar-nav navbar-right’, ‘fallback_cb’ => ‘wp_page_menu’, ‘walker’ => new BootstrapNavMenuWalker () )); ?>

    this is the html of what i want,

    Home

    Products

    A

    Apple

    Areo

    Ant

    B

    Bat

    Ball

    Bus

    C

    Cat

    Car

    Resources

    Contact

    • Hi Hanzi,

      this code is very long and due to Discuss formatting removal i can barely read it…
      do you have any development environment (link to the site under construction and ftpsftp access) to check this with a better editoride?

  • I’ve fixed it:

    $args = array(

    ‘theme_location’ => ‘top-bar’, ****** THIS ATTR CRASH THE MENU ******

    ‘depth’ => 0,

    ‘container’ => false,

    ‘menu_class’ => ‘nav’,

    ‘walker’ => new BootstrapNavMenuWalker()

    );

    • I don’t get it… what was the matter with theme_location?

      did you remember to register the location with:

      register_nav_menu(‘top-bar’, __(‘Primary Menu’));

  • Nicolae Iosif

    I can use this for build and sell a wordpress theme based on Bootsrap?

    • Yes you can, as long as you leave the credits to authors πŸ™‚

      and, just for my personal knowledge, it would be great if you send me a link to the shop where you sell it πŸ™‚

      Good luck with it

      • Nicolae Iosif

        I wan’t to create a business from selling this item because we (my classroom from High School) will to create a company…

  • Pugazhenthi

    Excellent work. Thank

  • Zak Weinberg

    Not sure if we’re still active in these comments or not, but I added this to a dev site, http://www.echoboomerdesign.com/lab/fuse, and the responsive functionality doesn’t seem to work. Any ideas?

    – Zak

  • Seb

    Thank’s a lot ! Very nice. It worked for me with wordpress 3.9.2

  • Numan

    Great job. Thanks a lot! πŸ™‚

  • Kim

    Hi There,

    does anyone know how I can add a top-bar to the bootstrap yamm menu. I attach a snapshot of the case.
    Thanks
    Kim

    • Hey,

      if I understand the snapshot correctly, I’ll go for an inset box shadow like this:

      .navbar .nav>li>a {
      box-shadow: inset 0px 5px 0px 0px rgba(200, 0, 0, 0.75);

      }

      Obviously it doesn’t work on old version of IE… but honestly I’ve dropped such support a long time ago πŸ™‚

      cheers

  • aprillins

    very very useful post! I really appreciate this! This saves so much time!

  • Meee

    Great Thx man
    you are the best

  • teja seethal
    • Yep it’s a valid alternative. At the time I wrote this article it was not published yet πŸ™‚

  • Jordan Charters

    How might you integrate the ‘description’ field from the menu page? I’d like to display one or two words under each page title.

    • You can hook into start_el and add this code where needed:
      $item_output .= ” . $item->description . ”;

      probably around line 62-64… it depends on how good it looks if you insert a b.caret
      you can also adjust the html to look great… maybe a small is also a good idea…

      Cheers

  • himesh

    Good …

  • Brian

    Closing tag of <?php is missing….I think i cant find a closing tag anywhere when i search it in Dreamweaver. Also wil this work for the footer menu as well?

  • Brian

    Closing tag of php tag missing I think. I cant find it when I search the file in dreamweaver. Also will this work for the footer menu as well?

    Thanks

    • Il with footer menu you mean the navbar with class .navbar-fixed-bottom, well yes it should.

      I personally avoid php closing tag on functions.php, ant other php only files, to avoid ‘headers already sent’ in case of a space or newline after the closing tag.
      It’s only my preference.

      Cheers

  • beginner

    You would not believe how much you’ve helped me with this code! thank you!!!

  • Filip

    This is Great!!! Thank You Emanuele

  • Vincent

    Thank you very much. Working like a charm…exactly what I was looking for πŸ™‚
    Good Job!

  • nlnl

    Hello, can you tell me how I can add a footer menu, as well?

    • well I think you can call register_nav_menu() with a different menu name (first parameter)

  • Serkan ErgΓΌn

    Thanks a lot , excellent work