DevDmBootstrap3
Twitter Bootstrap 3 WordPress Starter Theme for Developers
Menus
There are two menus registered out of the box and one widget menu for the sidebars.
|
1 2 3 4 5 6 7 8 |
if ( function_exists( 'register_nav_menus' ) ) { register_nav_menus( array( 'main_menu' => 'Main Menu', 'footer_menu' => 'Footer Menu' ) ); } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php if ( has_nav_menu( 'main_menu' ) ) : ?> <div class="row dmbs-top-menu"> <nav class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1-collapse"> <col-md- class="sr-only">Toggle navigation</col-md-> <col-md- class="icon-bar"></col-md-> <col-md- class="icon-bar"></col-md-> <col-md- class="icon-bar"></col-md-> </button> </div> <?php wp_nav_menu( array( 'menu' => 'main_menu', 'theme_location' => 'main_menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse navbar-1-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </nav> </div> <?php endif; ?> |
template-part-footernav.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php if ( has_nav_menu( 'footer_menu' ) ) : ?> <div class="dmbs-footer-menu"> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2-collapse"> <col-md- class="sr-only">Toggle navigation</col-md-> <col-md- class="icon-bar"></col-md-> <col-md- class="icon-bar"></col-md-> <col-md- class="icon-bar"></col-md-> </button> </div> <?php wp_nav_menu( array( 'menu' => 'footer_menu', 'theme_location' => 'footer_menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse navbar-2-collapse', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </nav> </div> <?php endif; ?> |
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.
I want to know, is there any way of making the navbar full width?
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" >
Thank you so much!
how about to make footer menu full width but not sticky? Thanks!
Hi Richard! Thanks for using the theme and reaching out.
You can edit the file “template-part-footernav.php” inside your child theme and remove the sticky class.
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.
The nav-walker only supports 1 level. This is for “touch device” reasons as multilevel drop down support is just messy there.
for depth of 3 or 4 this work fine
http://illuminatikarate.com/blog/bootstrap-walker-for-wordpress
What do you recommend then for a navigation that needs a menu depth of 3 or 4?
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. 🙂
Can do.
Any luck Erik?
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.
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
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.
Sure. This is the website: http://rawmazing.ro/web/
Thanks
So the problem here Ciprian is a couple things. The first is that your HTML is a little hectic. You can’t open the menu because you can’t actually click on it. You have your columns floating about and not really properly contained within the rows so none of the floats are being cleared.
If you look at this screen shot:
http://devdm.com/DevDmBootstrap3/wp-content/uploads/rawmazingss1.jpg
You see the div below the menu is overlapping the menu itself.
When I add the clear.
http://devdm.com/DevDmBootstrap3/wp-content/uploads/rawmazingss2.jpg
The menu is accessible but if you expand the site again you’ll see your columns are floating up nicely below the menu anymore.
So do with that what you like.
The quickest and easiest solution is to just add z-index: 99999 (something high) to the menu div itself. This brings it to the front and it is clickable.
http://devdm.com/DevDmBootstrap3/wp-content/uploads/rawmazingss3.jpg
So I support retooling your HTML and making sure you are using bootstrap to its’ potential so you don’t get caught in these kinds of things again. But I’m also a realist and a developer like you who needs the fix now. You’ll deal with all that other mumbojumbo later. Good Luck!
Thank you for your help and input 🙂
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?
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())
);
?>
Hey Yordan,
Can you email me the code so I can post it on the forum for others? The comments code blocks don’t work that well. 🙂
danny@devdm.com
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!
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. 🙂
Thank you very much! Worked like a charm 🙂
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?
Hey Trishah,
#2 I have covered. I just made a forum topic to show you. http://devdm.com/DevDmBootstrap3/community/topic/drop-down-menu-on-hover/.
#1 Is very “up in the air” I’ve approached this problem over the past year from a few different angles and can’t seem to settle on any solutions that work well and are not super intrusive. People have tried plenty of different things but it seems like most settle on using a plugin to generate their menu.
Hi danny great job!
I would like to know if is possible to use badges on my menus and if so how am i going to make it?
thank you!