alexweblab / bootstrap-5-wordpress-navbar-walker Goto Github PK
View Code? Open in Web Editor NEWBootstrap 5 WordPress navbar walker menu.
Home Page: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
License: MIT License
Bootstrap 5 WordPress navbar walker menu.
Home Page: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
License: MIT License
Hi, I was wondering if this nav-walker has support for sub-dropdowns and customized stuff like megamenu support?
I would like to accomplish something similar to:
from https://bootstrap-menu.com/demos/megasubmenu.html
But I have only been able to get the single dropdown to work correctly. Specifically, when (in the wp customizer), a sub-link is added (see screenshot), the menu item disappears altogether.
This is the code I am using (in a custom wordpress theme):
<nav class="navbar navbar-expand-md navbar-light py-3 bg-white">
<div class="container-fluid col-12 col-md-11 py-2 py-md-0">
<a class="navbar-brand" href="<?php echo get_option('home'); ?>">
<?php
// Get the uploaded logo image
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
if (has_custom_logo()) {
echo "<img class='logo' src='";
echo $logo[0];
echo "' alt=''>";
} ?>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-md-flex justify-content-md-end" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav %2$s">%3$s</ul>',
'depth' => 5,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
</div>
</nav>
Sorry if I've overlooked something... and thanks for your time. :)
Hello Alex,
thank you very much for this awesome nav-walker.
Is it possible to add .active class to following parent items?
And I do not see a license here. Can you add a license that we can use this nav-walker safely?
Thank you and best regards
Basti
Thanks!
In my use case I need to be able to add custom classes to the anchor elements created by wp_nav_menu .
To do so, I have a hook filter that should be called on nav_menu_link_attributes.
The problem is that bootstrap_5_wp_nav_menu_walker appears to never call nav_menu_link_attributes, so this does not work. Can this be added ?
I have another similar filter for nav_menu_css_class (used to add classes to the li elements), which works fine (I guess because nav_menu_css_class is actually called in bootstrap_5_wp_nav_menu_walker).
Thanks
First, I would like thank you for this amazing contribution! Without it I would be lost :)
When the menu item for a custom post type archive (archive-karriar.php) is active, then also the blog menu item (home.php or index.php - which ever used) is hi-lighted as the current menu item.
Strange thing is, this does not happen the other way around - when home.php or index.php menu item is active, the cpt archive is not hi-lighted as current page. Other than that the walker i working flawlessly.
I'm using
This is the code I'm currently using in header.php:
<nav id="main-nav" class="navbar navbar-expand-lg fixed-top navbar-light bg-light" aria-labelledby="main-nav-label">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo site_url(); ?>">
<img src="<?php echo get_theme_file_uri('/img/logo.svg'); ?>" alt="" class="custom-logo">
</a>
<button class="hamburger hamburger--squeeze" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
</div>
</nav>
I'm not sure what else info you would need, but if something is missing just let me know. Thnx!
Don't know if this is a valid question but I would like to have the submenu's opening on mouseover instead of a click. Is this configurable somewhere? Or do I need to use a different bootstrap menu?
Hello,
Many thanks for your great effort.
Please consider potential compatibility with this (accordeon/vertical) bootstrap 5 menu:
https://preview.keenthemes.com/metronic8/demo1/pages/profile/overview.html
That is to say that:
Each parent needs to know if it has children (if not to not display the arrow).
For each opened child to also assess the parents that they belong so that if the child is active the parents to be also "active".
Here is a summary of the code that needs to be produced with a full menu:
<div class="menu menu-column menu-title-gray-800 menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary menu-arrow-gray-500" id="#kt_aside_menu" data-kt-menu="true">
<div class="menu-item menu-accordion" data-kt-menu-trigger="click" >
<span class="menu-link">
<span class="menu-icon">
<!--begin::Svg Icon | path: icons/duotone/Code/Compiling.svg-->
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<path d="M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z" fill="#000000" opacity="0.3" />
<path d="M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z" fill="#000000" />
</svg>
</span>
<!--end::Svg Icon-->
</span>
<span class="menu-title">By Provider</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Microsoft</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="pages/profile/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/projects.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By Application</span>
</a>
</div>
</div>
</div>
<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
<span class="menu-link">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">ERP</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion menu-active-bg">
<div class="menu-item">
<a class="menu-link" href="pages/profile/overview.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Overview</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/projects.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By Application</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/campaigns.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By User Group</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/documents.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By User</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/connections.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By Activity</span>
</a>
</div>
<div class="menu-item">
<a class="menu-link" href="pages/profile/activity.html">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">By Behaviour</span>
</a>
</div>
</div>
</div>
<!--end::Menu-->
</div>
Hi, I've created sub-sub menu but depth = 3 doesn't seem to work. Menu items appear in HTML.
Hi
Thank you for bootstrap walker update.
When i make 2 level submenu it the submenu at level 0 stops working.
Please help.
Thanks.
Sana
Hi @AlexWebLab ,
Thank you for this code. I have implement this code working fine for singe dropdown but when I try to do this multilevel on that time menu ul not generating. Can you help me on this.
I use for 2 level menu, all is fine. But when I use the 3 level menu, the menu on the third level doesn't appear, but the elements are visible when inspected. And I changed the depth to 3, but it doesn't show up either.
Can anyone help me?
Hi! I am not able to get menu in WP 5.8. Does that work for you?
I see that there were done some changes in new version of wordpress.
I'm new to wp walkers, and I'm not sure if this is an issue with this code, but I thought I'd ask. I'm working on completing a custom WordPress theme built on BS-5 that I was handed but it didn't have dropdown support for WP menus. That's where I found your code to add to my sidebar. I copied your function code directly into my functions.php and below is in my sidebar.php file.
<?php wp_nav_menu(array( 'theme_location' => 'left-column-menu', 'container' => false, 'menu_class' => '', 'fallback_cb' => '__return_false', 'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>', 'depth' => 2, 'walker' => new bootstrap_5_wp_nav_menu_walker() )); ?>
The code works and creates dropdowns, however, when I click the dropdown, I see an inline style tag and javascript "data-popper-placement" tag that displays within the 2nd level ul tag like this
<ul class="dropdown-menu depth_0 show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 48px);" data-popper-placement="bottom-start">
I can't find where this code is coming from that inserts this inline style CSS but I need to remove it because it displays poorly on the page. Could you point me in the direction to remove this style?
Any help would be much appreciated.
Is i possible to make the parent stay clickable when having children items?
Hi,
First of all thanks for the nice walker. I have used it in my WordPress theme and when I went to validate my site it gets validation error duplicate attributes. That is why it I came here to let you know.
When your menu depth is higher than 0 then it will get validation error.
Best Regards
Hi, I was looking for a Bootstrap 5 nav walker and I stumbled in this library of yours.
I've created a WordPress starter theme that natively integrates Bootstrap, and I'm currently migrating it from BS v.4 to v.5.
I was wondering if it would be possible for me to test your walker and see if it could be embedded in my project. Currently I'm using wp-bootstrap-nav-walker, but it does not support Bootstrap 5, and I'm considering alternatives.
My theme is called Bricks, and it is publicly available as an open-source project.
Hi there,
How can I achieve to navigation on the dropdown menu using tab and shift+tab ?? Now, It's opening after clicking on the submenu item. But I want to show it when someone focus on the dropdown toggle.
do not work sub menu in depth 3.
what's the solution?
Hello
Many thanks for this code.
Would you be able to add support for the JC Submenu plugin please?
For some reason it just doesn't show the submenus when I choose to use your walker nav but it (the JC plugin) works if I use it with the regular Wordpress menu (checked with WordPress 5.7.2).
Link to the plugin:
https://wordpress.org/plugins/jc-submenu/
Thank you!
Hello Alex,
Hope you are doing well. I have encountered an issue today.
If you have any 3rd level menu item then it's immediate parent item will not show. To get understand the issue I have attached 2 screenshots. On 2nd screenshot of front-end you can see that, the "Level 2" menu item is not showing because of it has children. "Level 2a" and "Level 2b" are showing properly because of they don't have any children items.
I have fixed the issue already on my side.
Best Regards
Asif
Any insights on why navwalker would not work with starter-content? Removing the navwalker to default to the wp_nav_menu, adding theme support for starter nav menus works where it does not with the walker.
Hi,
I would like to use this tool for my current web project
Is the latest version (v. 1.3.4) of this navbar walker fully compatible with Boostrap 5.3.2 ?
Let me know, thanks
Best regards,
Letizia
Update class according to WordPress standard for Bootstrap 5 WordPress navbar walker menu
Howdy, I'm using the latest version of Bootstrap (5.1.3) and get the error "ParseError thrown / syntax error, unexpected '<', expecting end of file" when trying to use bootstrap-5-wordpress-navbar-walker
Is Bootstrap 5.3.1 supported or should I use another version?
Thanks for your time.
For small screens the hamburger that should display the menu doesn't work.. have a solution?
I need to add a class to make a dropdown menu become right aligned, as per the Bootstrap instructions: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
The only way I can set this in Wordpress, is to add a class of 'dropdown-menu-end' to the parent menu item. This needs to be passed through to the dropdown though, but it's not.
How would this be possible to set the alignment of the dropdown menu (aside from CSS hacks)?
Hi Alex, I've run into a problem today.
When clicking on an anchor link to navigate to a specific section within the single-page website, the page scrolls to that section but then immediately bounces back to the top. This happens when you're using Hamburger menu to navigate.
Website Link: https://cicos.digitalplayers.website/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.