[ad_1]
https://i.ytimg.com/vi/t-AGjdMrtdA/hqdefault.jpg
In this video I will show you how to create a Bootstrap navbar to be used in your WordPress theme using the navwalker class. We will be able to utilize dropdowns in WordPress menus
Project Files – https://github.com/bradtraversy/wpbootstrap_theme
10 PROJECT WORDPRESS THEME COURSE: https://www.eduonix.com/affiliates/id/16-10405
Original source
26 responses to “WordPress Theme With Bootstrap [3] – Menu With Dropdown”
Only 1 level submenu?
For Bootstrap 4 and Latest Version of WordPress i.e.
Version 5.3.2 you can use this wp-bootstrap-navwalker which is maintained.
https://wp-bootstrap.github.io/wp-bootstrap-navwalker/
Follow the Site and its easy to implement.
hi please add tutorial multilevel dropdown menu in bootstrap.
Everything went well untill this part. I can't change the style of my menu from blue to white. I copied everything, but don't know why it doesn't work. When I select the "home" button in developers mode, it says after the "a{" "bootstrap.css:1099" does that mean that the code is only in bootstrap.css? Can someone please help me?!
after 2 video tutorial.. not showing any menus in website… can you tell me … what will b the problem?????????plzzzz
Now, you need to change wp_bootstrap_navwalker.php, with new walker, check this step 4>
https://www.sitepoint.com/bootstrap-wordpress-theme-integration/
I did everything but menu is not showing up
If someone has Problem with this change the code to the example from the WP Bootstrap Navwalker Site.
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
The only Problem is that you have to make a new css that it looks good.
my navbar dropdown get triggered with click, how to make it triggers with mouse hover? any one know?
kinda having problem with adding the bootstrap of css. I cant go to php after the double qoute
my code is pasted below
<link href=" <?php bloginfo('stylesheet_uri'); ?> " rel="stylesheet">
jesus I was all day trying to sort this out, the only thing that worked for me was to copy the bit of code require_once('wp_bootstrap_navwalker.php'); from the the dowloaded file, which is exactly as I wrote lol
give it a try ….
My menu was also missing. It was because of Bootstrap version upgraded to version 4. So I used bs4navwalker instead of wp-bootstrap-navewalker and it was fixed. You can download bs4navwalker here: https://github.com/dupkey/bs4navwalker.
For the dropdown issue, I imported popper.js file into functions.ph using wp_enqueue_scripts.
Alright this is where I hop in… I have tried almost everything till this stage of this tutorial…
>> For all those who get the Fatal error… Just download the github link that is provided in this tutorial…
>> Next, will be the disappearing nav-bar at phone resolution. What we can do is to copy this code
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!– Brand and toggle get grouped for better mobile display –>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
>> and replace the earlier code i.e…
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
</div>
</div>
>> In front-page.php remove the whole bar code cause there is no point of giving it in a separate place. Its already there in the header.php. So remove this code…
P.S: this is the same code as in the earlier step
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</nav>
</div>
</div>
>> Next, in front-page.php. Just above this code: <?php wp_head(); ?>. Add this code…
<?php get_header(); ?>
//it will give the same header as before in front-page.php.
>> I didn't want my site title to be displayed under the nav-bar. It looked awkward so I removed the following code from header.php.
<div class="container">
<div class="blog-header">
<h1 class="blog-title"><?php bloginfo('name'); ?></h1>
<p class="lead blog-description"><?php bloginfo('description'); ?></p>
</div>
>> Now go to style.css and as we have removed the earlier nav-bar with a new code. We need to remove some codes from style.css. Remove these codes
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
>> Replace it with… This code…
.navbar {
background-color: #428bca;
padding: 0.5rem 0 0 0;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
.navbar li a{
color:#fff;
}
/* Nav links */
.navbar-toggler {
position: relative;
display: inline-block;
background-color: #fff;
font-weight: 500;
color: #cdddeb;
border: 0.1rem solid #fff;
}
.navbar-toggler:before,
.navbar-toggler:after{
content: "";
position: absolute;
width: 13px;
border: 0.1rem solid #fff;
height:0.3rem;
background-color: #fff;
}
.navbar-toggler:before{
top:-1rem;
left:0;
}
.navbar-toggler:after{
right:0;
bottom:-1rem;
}
@media only screen and (min-width: 768px) {
.navbar-toggler{
display: none;
}
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
…This will solve the issue of the nav-bar for mobile resolution.
Next you will notice that when you open navbar in phone resolution, it works fine on front-page.php but not any other. For that you will have to copy the codes… from front-page.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/bootstrap.js"></script>
//it contains the the toggle feature controlled by javascript
>> Paste it in header.php and then you will be able to use the toggle feature perfectly on every other page as well.
I might be missing some aspects but even my project is a work-in-progress. It's just that I didn't want others to spend countless hours thinking over nav walker.
You are free to add and make the above codes more efficient. This is just my knowledge at work…
this is the probem that i have faced . how to remove it?
Fatal error: Uncaught Error: Class 'wp_bootstrap_navwalker' not found in /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/header.php:34 Stack trace: #0 /opt/lampp/htdocs/wptheme/wp-includes/template.php(688): require_once() #1 /opt/lampp/htdocs/wptheme/wp-includes/template.php(647): load_template('/opt/lampp/htdo…', true) #2 /opt/lampp/htdocs/wptheme/wp-includes/general-template.php(41): locate_template(Array, true) #3 /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/index.php(1): get_header() #4 /opt/lampp/htdocs/wptheme/wp-includes/template-loader.php(74): include('/opt/lampp/htdo…') #5 /opt/lampp/htdocs/wptheme/wp-blog-header.php(19): require_once('/opt/lampp/htdo…') #6 /opt/lampp/htdocs/wptheme/index.php(17): require('/opt/lampp/htdo…') #7 {main} thrown in /opt/lampp/htdocs/wptheme/wp-content/themes/wptheme/header.php on line 34
how did you add active state?
not working sir pls show some alternate method
Is anyone having problems getting navwalker disappearing when you scale the screen less than 768px?
There should be an updated version of this video! I somehow managed to show the menus but the styles don't appear on the front-end! ):
hi, I want navigation menu same this link
http://www.harrywinston.com/en
please guide me
thank you
Thank you very much
I can not understand in the language how much I have benefited from this video.
hi buddy ,its a great video i… i have done exact same and used same template when menu was replaced with following code the hovering of menu width is full screen can uh tell me y is that so and how can i overcome it
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'false',
'menu_class' => 'nav nav-list',
'fallback_cb' => 'wp_bootstrap_navlist_walker::fallback',
'walker' => new wp_bootstrap_navlist_walker())
);
?>
So I am following along with the Nav Walker setup and I noticed that for some reason when I click on the drop down menu it looks like the menu is going behind the main content or id doesn't show the dropdown I should say. Any ideas why?
How come the drop down menu and the navbar toggler doesn't work on mobile
For anyone having issues with the Nav Bar styling not showing up, go to the header.php file and add "nav" to the 'menu_class' array. When I copied the code from github it didn't have that class selector.
Show this error : fatal error class 'WP_Bootstrap_Navwalker' not found in c:\header.php on line 35 Please help me
don't get it, my page now just loads to the github navwalker page, followed everything to the letter.. copied the old wp_bootsrap_navwalker from his github reources folder.. got bootstrap 3.3.7 cdn.. what am i doing wrong??