WordPress navbar responsive doesn’t show

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:

Read More
    <!-- 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.

Related posts

1 comment

  1. Use this slidetoggle function

    <script type="text/javascript">
        jQuery( document ).ready(function() {
        jQuery(".dl-trigger").click(function(e){
            e.preventDefault();
            jQuery(".dl-menu").slideToggle(150);
                })
        });
    </script>
    

Comments are closed.