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.
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>
Bootstrap Nav Menu For WordPress was last modified: July 6th, 2022 by
Summary
Article Name
Bootstrap Nav Menu For WordPress
Description
This tutorial will show you how to put in a Bootstrap Nav Menu into WordPress
Author
Maximus McCullough
Publisher
A1WEBSITEPRO LLC
Logo
1 Comment
#navmenu #bootstrap #wordpress #tutorials