Mobile menu not working

[liukang93]

Steps to reproduce the issue:

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse content" id="collapsibleNavbar"> Hello <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'navbar-nav ml-auto', 'menu_id' => 'navbar-content', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?> World </div>

What I expected:

Showing when site is on mobile

What happened instead:

Hello World is displayed but the dynamic content did not display.

[IanDelMar]

Hi @liukang93, try this

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse content" id="collapsibleNavbar">
	Hello
	<?php
	wp_nav_menu(
		array(
			'theme_location' => 'top-menu',
			'depth'                => 2,
			'menu_class'       => 'navbar-nav ml-auto',
			'menu_id'            => 'navbar-content',
			'fallback_cb'        => 'WP_Bootstrap_Navwalker::fallback'
			'walker'               => new WP_Bootstrap_Navwalker(),
		)
	); ?>
	World
</div>

and make sure a menu is assigned to the menu location 'top-menu'.

Please let me know whether this worked for you.

[jamesjsewell]

i'm experiencing the same issue, tried this solution with no luck. the menu remains display: none, even after onclick,
also the active link isn't highlighted. I dont think this is a wordpress js issue as the modal works fine. could it be my version of bootsrap?

[IanDelMar]

@jamesjsewell please provide your code.

[jamesjsewell]

@IanDelMar thanks i just figured it out, for me i was using bootstrap 5, DOH! going back to bs4 resolved the issues. see #499

[dgdb1]

Steps to reproduce the issue:

<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse content" id="collapsibleNavbar"> Hello <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'navbar-nav ml-auto', 'menu_id' => 'navbar-content', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), ) ); ?> World </div>

What I expected:

Showing when site is on mobile

What happened instead:

Hello World is displayed but the dynamic content did not display.

I tested your code and you just need to make some minor changes to make it work with Bootstrap 5.

Change:

• data-toggle to data-bs-toggle
• data-target to data-bs-target
• Delete from container_class - 'collapse navbar-collapse collapse'

Full work code with Bootrstrap 5:

<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse content" id="collapsibleNavbar"> Hello 
<?php wp_nav_menu( array( 

 'theme_location'    => 'primary',
'depth'             => 2,
            'container'         => 'div',
            'container_class'   => '',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'navbar-nav ms-auto',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
 ) );
?> World </div>

</header>

[IanDelMar]

Closing this as the issue is resolved.