I’m utilizing this Bootstrap 4 Navwalker, bs4navwalker, to step by way of my WordPress menu objects and generate a navbar, like…
Single stage – works
<?php
wp_nav_menu([
'menu' => 'primary',
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'sidebar-nav',
'menu_id' => 'sidebarnav',
'depth' => 2,
'fallback_cb' => 'bs4navwalker::fallback',
'walker' => new bs4navwalker()
]);
?>
This appropriately generates a navbar like …
<nav class="sidebar-nav">
<ul id="sidebarnav" class="menu">
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3 nav-item energetic">
<a title="House Web page" goal="_blank" href="http://sandbox.contexthq.com/" class="nav-link energetic" aria-expanded="false">
<i class="icon-speedometer"></i>House Web page
</a>
</li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4 nav-item">
<a title="Instance Web page" goal="_blank" href="http://instance.com/" class="nav-link" aria-expanded="false">
<i class="ti-layout-grid2"></i>Instance Web page
</a>
</li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5 nav-item">
<a title="Customized Web page" goal="_blank" href="http://instance.com/{custom}/" class="nav-link" aria-expanded="false">
<i class="ti-palette"></i>Customized Web page
</a>
</li>
</ul>
</nav>
Multi-level – most well-liked
The issue occurs in terms of drop-down/sub-menu objects…
My theme handles these like this…
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="chosen">
<a category="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
<i class="icon-speedometer"></i>
<span class="hide-menu">
Dashboard <span class="badge badge-pill badge-cyan">4</span>
</span>
</a>
<ul aria-expanded="false" class="collapse">
<li><a href="index.html">Minimal</a></li>
<li><a href="index2.html">Analytical</a></li>
<li><a href="index3.html">Demographical</a></li>
<li class="energetic"><a href="index4.html" class="energetic">Fashionable</a></li>
<li><a href="index5.html">Cryptocurrency</a></li>
</ul>
</li>
<li>
<a category="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
<i class="ti-layout-grid2"></i>
<span class="hide-menu">Apps</span>
</a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-calendar.html">Calendar</a></li>
<li><a href="app-chat.html">Chat app</a></li>
<li><a href="app-ticket.html">Help Ticket</a></li>
<li><a href="app-contact.html">Contact / Worker</a></li>
<li><a href="app-contact2.html">Contact Grid</a></li>
<li><a href="app-contact-detail.html">Contact Element</a></li>
<li><a href="javascript:void(0)" class="has-arrow">Inbox</a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-email.html">Mailbox</a></li>
<li><a href="app-email-detail.html">Mailbox Element</a></li>
<li><a href="app-compose.html">Compose Mail</a></li>
</ul>
</li>
</ul>
</li>
</nav>
… That’s, it:
- provides a
<span>
with.hide-menu
contained in the top-level hyperlink<a>
- provides an
<ul>
unordered listing afterward.
That is the strategy I wish to persist with.
Multi-level: what navwalker provides
Nevertheless, when utilizing the navwalker, I get…
<nav class="sidebar-nav">
<ul id="sidebarnav" class="menu">
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-3 nav-item dropdown energetic">
<a title="House Web page" goal="_blank" href="http://sandbox.contexthq.com/" class="nav-link dropdown-toggle energetic" data-toggle="dropdown" aria-expanded="false">
<i class="icon-speedometer"></i>House Web page</a>
<div class="dropdown-menu">
<a href="http://sandbox.contexthq.com/sample-page/" class="dropdown-item" aria-expanded="false"><i class="ti-palette"></i>Pattern Web page</a>
</div>
</li>
...
</ul>
</nav>
That’s, it…
- locations a
<div>
with.dropdown-menu
contained in the<a>
, as a substitute of a<span>
with.hide-menu
- for the sub-menu objects, makes use of
<a>
components
I am positive that is customary Bootstrap 4 behaviour – actually, I’ve fortunately used it this fashion on a distinct web site. Nevertheless, it is not what is required by the Bootstrap 4 theme which I’ve bought and am at present attempting to show in to a WordPress theme…
The query
How can I exploit the bs4navwalker however in a manner that may current drop-down/sub-menu objects in a way per my theme… ?