1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

Boostrap Nav Menu For WordPress

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 Maximus Mccullough

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

more tips

Reoccuring Tips

Tips

Cool People Share:
bootstrap-nav-menu-for-wordpress

1 Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.