I have a custom bootstrap 4 theme I am building out in wordpress. The drop down mobile menu does not work when the hamburger menu is pressed at smaller viewports. I am not sure if I need to add a something to the function.php file for mobile menu, or some other php/wp code for the collapsible nav?

The mobile menu will work when I uncomment the "collapse navbar-collapse" section, but then two menus appear. This tells me all the scripts and css are working. However, I not sure what I am missing I can't seem to figure out what I am missing. I am not using the navwalker script. I would greatly appreciate anyone's help!


 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

    <img class="ml-2 NVAlogo" src="<?php bloginfo('stylesheet_directory'); ?>/img/NVAlogo.png" alt="logo"><a class="navbar-brand" href="front.html">Nuvision Alliance</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>


     wp_nav_menu( array(

        'menu'    =>      'primary',

        'container'         =>      'nav',

        'container_class'   =>      'navbar-collapse collapse',

        'menu_class'        =>      'nav navbar-nav navbar-right'



  <div class="collapse navbar-collapse" id="navbarCollapse">
   <ul class="navbar-nav mr-auto">

       <!-- <li class="nav-item">
          <a class="nav-link" href="mission.html">Mission</a>
          <li class="nav-item">
          <a class="nav-link" href="causes.html">Causes</a>
           <li class="nav-item">
          <a class="nav-link" href="index.html">Blog</a>

          <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>



2 Answers 2


You don't have an ID in your wp_nav_menu call. Add 'container_id' => 'navbarCollapse', to the array you're passing in. And remove the HTML below it that has all the commented out code in it.


I had a similar issue - ensure jquery.js is present and the link works in the page.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.