DevDmBootstrap3

Twitter Bootstrap 3 WordPress Starter Theme for Developers

There are two menus registered out of the box and one widget menu for the sidebars.

The template code for these menus is locate in template-part-topnav.php and template-part-footernav.php. Due to Bootstrap’s menus having a lot of customization options it was best to keep this items isolated.

template-part-topnav.php

Β template-part-footernav.php

Just like every other Bootstrap based theme we are going to use Edward McIntyre’s wp_boot_strap_navwalker. As of writing this post we are using version 2.0.4.

The location of this file is “/DevDmBootstrap3/lib/wp_bootstrap_navwalker.php.” See Edward’s documentation on GitHub for more information on how to use the class.

25 Comments

  • I want to know, is there any way of making the navbar full width?

    • danny says:

      Sure is man!

      Just end the main container before the menu and then reopen the container at the end.

      So in your template-part-topnav.php make the first line a closing /div:

      Line 1 (minus the obvious spacing): < / div >

      and then re-open the container. This breaks the navigation out.

      Last line:

      < div class="container" >

  • Sam Richardson says:

    How can I adjust the menu so that .caret and dropdowns show for 4 levels? I adjusted the depth setting to 4, but it doesn’t seem to work.

    • danny says:

      The nav-walker only supports 1 level. This is for “touch device” reasons as multilevel drop down support is just messy there.

  • erik says:

    What do you recommend then for a navigation that needs a menu depth of 3 or 4?

    • danny says:

      I’ve explored this a little bit Erik but haven’t found anything that worked well. If you do find anything please let us know. πŸ™‚

  • Erik says:

    No. I had a quick job to do so ended up using Uber menu to get the job done. I didnt like doing that but it will work for the client.

  • Ciprian says:

    Hi,

    I have a menu that needs to be in a smaller container col-md-10. For mobile devices I used col-xs-12 but I have the problem that the menu button stops working. If I remove the col-xs the button starts working but the menu become very large, the whole top of the page. Any way to solve this? This is part of the code I’m using. Thanks

    Toggle navigation


    • danny says:

      Hey Ciprian.

      Love how that code you put in just got stripped out. πŸ™ sorry.

      Can you give me a link to look at? Could be a ton of things going on here. Easier if I can just play with it using the web inspector to come up with the solution.

  • Yordan says:

    Hi Danny,

    What’s the proper way to embed a search form in the nav bar with Navwalker? Usually the code can be inserted after the UL tag in the menu but with Navwalker it seems it must be handled in some other way?

    • Yordan says:

      I figured it out – here it is for reference in case someone else is wondering:




      'main_menu',
      'depth' => 2,
      'container' => false,
      'menu_class' => 'nav navbar-nav',
      'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
      'walker' => new wp_bootstrap_navwalker())
      );
      ?>

  • Lucas says:

    Hi, Danny! Thank you for the amazing theme!

    Just a question, I’m developing a site and I’ll need 4 menus, what’s the correct approach to register them? Override the “register_nav_menus” function on my child theme’s functions.php?

    Thank you very much again!

    • danny says:

      You don’t have to override them you can “add” to them with a child themes functions.php file. Just add another register_nav_menus with your new locations.

      register_nav_menus(
      array(
      'test_main_menu_2' => 'Test Main Menu2',
      'test_footer_menu_2' => 'Test Footer Menu 2'
      )
      );

      If you put a code like this inside your child theme’s functions.php file you would have the 2 new locations along with the original registered ones. How you call them and where you use them is up to you. πŸ™‚

  • Lucas says:

    Thank you very much! Worked like a charm πŸ™‚

  • Trishah says:

    Love this theme and use it all the time as a parent theme πŸ˜€

    Currently, when there is a dropdown main menu item, and you click on it, the menu pops and stays open and the main menu item is not a link. How do I change this so that (1) the main menu item is a link, and (2) the menu only remains open when the main menu item or the dropdown menu is hovered?

Leave a Reply

Your email address will not be published. Required fields are marked *