I am trying to fix a header on my website, all the stuff works pretty nicely except when I make smaller the browser, the main menu drops to a button (as expected) at the beginnging doesn’t show the content of the navegation bar, but now, the button is always showing the content, and doesn`t hide when clicked.
The code is:
<!-- mainmenu begin -->
<div class="de_menu collapse navbar-collapse">
<div id="mainmenu" class="mainmenu">
<!-- mainmenu begin -->
<?php
$primarymenu = array(
'theme_location' => 'primary',
'menu' => 'primary',
'container' => 'false',
'container_class' => 'collapse navbar-collapse',
'container_id' => '',
'menu_class' => 'nav navbar-nav',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker(),
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul data-breakpoint="800" id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 2,
);
if ( has_nav_menu( 'primary' ) ) {
wp_nav_menu( $primarymenu );
}
?>
<!-- mainmenu close -->
</div>
</div>
Here is the code in the browser:
<!-- mainmenu begin -->
<div class="de_menu collapse navbar-collapse">
<div id="mainmenu" class="mainmenu">
<!-- mainmenu begin -->
<ul data-breakpoint="800" id="menu-menu-principal" class="nav navbar-nav">
<li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26 active">First Option</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27">Second option</li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-28 ">Third Option</a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31">First Child</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">Second Child</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29">Third Child></li>
</ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32">Fourth Option</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Fifth Option</li>
</ul>
<!-- mainmenu close -->
</div>
</div>
I have try my best, but I can’t figure how to fix it.
Use this slidetoggle function