Here is some code for bootstrap nav menus for wordpress. This is for anyone following along in the Bootstrap to WordPress Theme Creation Integration tutorial.
Tip: Click on images to make them larger.
If you find anything wrong on this page or need further assistance please comment below or contact me.
🙂
<nav class="navbar navbar-default"> <div class="container-fluid"> <?php wp_nav_menu( array( 'container' => 'ul', 'menu_class' => 'nav navbar-nav', 'menu_id' => 'bootmenu', 'echo' => true, 'theme_location' => 'main-menu', ) );?> </div> </nav>
Here is the code to collapse on mobile
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <?php wp_nav_menu( array( 'container' => 'ul', 'menu_class' => 'nav navbar-nav', 'menu_id' => 'bootmenu', 'echo' => true, 'theme_location' => 'main-menu', ) );?> </div> </div> </nav>
CSS for Sub Menus
.sub-menu{ list-style:none !important; position:absolute; display:none; } .nav li:hover > ul.sub-menu{ display: block; margin: 0; } .sub-menu li{ width:100px; margin-left:-33px; background-color: #f8f8f8; border-color: #e7e7e7; padding:8px; }
CSS For Sub Menus on Mobile
@media screen and (max-width: 760px) { .sub-menu{ display:block !important; position:relative; } .sub-menu a{ color:#666; text-decoration:none; cursor: pointer; } }
Bootstrap Function for Search
Place this in your functions.php file.
Subscribe To My YouTube Channel:
function wpdocs_my_search_form( $form ) { $form = '<form role="search" class="navbar-form navbar-left" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" > <div class="form-group"> <input type="text" class="form-control" value="' . get_search_query() . '" name="s" id="s" required/> </div> <button type="submit" id="searchsubmit" class="btn btn-default">Search</button> </form>'; return $form; } add_filter( 'get_search_form', 'wpdocs_my_search_form' );
Add Search box to your Menu Replce Nav Code with This
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <?php wp_nav_menu( array( 'container' => 'ul', 'menu_class' => 'nav navbar-nav', 'menu_id' => 'bootmenu', 'echo' => true, 'theme_location' => 'main-menu', ) );?> <?php get_search_form(); ?> </div> </div> </div> </nav>
Boostrap Nav Menu For WordPress was last modified: December 3rd, 2016 by
Please like, share and subscribe.
Advanced Programming Made Easy
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip
Reoccuring Tips
Cool People Share:

1 Comment
#navmenu #bootstrap #wordpress #tutorials