1 Star2 Stars3 Stars4 Stars5 Stars (8 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.

 

<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

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

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.