Collapsible Navbar does not open with Hamburger Toggle Button

[sehrdope]

Hello everyone!

I am having trouble with a collapsible menu. I am working on a very basic wp theme where the navbar shows normally in a regular browser (which it does perfectly), and once resized to 'sm' or on a mobile screen, it only shows the hamburger toggle button (which it also does perfectly). It should then, when clicked, open the navbar from the top down - which does not happen.

This is my header.php:

I have looked at all the issues posted here but the solutions do not work. I am sure that the functions.php is set up correctly. I have jQuery loading first, then Popper and then Bootstrap.js - in the footer. A very similar version of the Navbar is working in OctoberCMS, so I think my issue is within the wp_nav_menu.

Best, Julian!

[pattonwebz]

Hey, sorry I didn't see this issue till just now.

The code looks fine to me from your screenshot. What does the markup that this creates look like? I am curious if it is failing to create the container correctly.

In my own themes I prefer to add the wrapper container manually. In one theme I have this working with this code:

<nav class="collapse navbar-collapse" id="headerNav" role="navigation" aria-label="Main Menu">
    <span class="sr-only"><?php esc_html_e( 'Main Menu', 'best-reloaded' ); ?></span>
    <?php
    wp_nav_menu(
        array(
            'theme_location' => 'best_reloaded_nav_topbar',
            'depth'          => 2,
            'container'      => false,
            'menu_class'     => 'navbar-nav mr-auto',
            'fallback_cb'    => 'best_reloaded_topbar_nav_fallback',
            'walker'         => new wp_bootstrap_navwalker(),
        )
    );
    ?>
</nav>

Obviously you should change the values to match your own location and callback choice.

[GabrieSouza]

Same problem!!

[pattonwebz]

@gabriesouza did you try make the suggestion I have in my comment work? What was the result? Also you you have an example url I could check out to see the problem?

[sehrdope]

Hi, sorry for my late answer,

my solution to the issue was just to delete and re-type everything, exactly the same. For some reason, it is now working.

I have also tried adding the container manually and there seems to be no difference.

[joeybab3]

I had this problem, and manually adding the container fixed it.

[pattonwebz]

@joeybab3 could be a few problems that cause this to occur. Usually it's a missing bootstrap.js fully on the page or an ID mismatch. Do you have a demo site online I could look at to see the problem on your site?

[joeybab3]

@pattonwebz https://joeybabcock.me/blog_test/ Again though it works fine now with the fix mentioned earlier

[pattonwebz]

@joeybab3 I'm sorry I mistakenly mentioned you here and pasted this answer to the wrong thread. Oops lol

Sorry for disturbing you here but I am glad you do have a fix. I'd best go find the other thread I meant to post that in :p

[ghost]

Hey same problem here :( any suggestions?

[joeybab3]

@MarvmallowMandid the fix above work for you?

[ghost]

@MarvmallowMandid the fix above work for you?

i tried the container workaround but nothing changed... i don't even get dropdowns when including sub menus... could be i'm doing something wrong with the manual containers.

[ghost]

Hey my problem is solved now ... i was a complete fool ! The newest Version of Bootstrap isn't just "bootstrap.min.js" it's "bootstrap.bundle.min.js" so yes that was my problem 🗡

[pattonwebz]

Sorry I was not around to help at the time but I am glad this one got solved.