Dropdown not working (upon click) in Bootstrap 3.0.3 about wp-bootstrap-navwalker

[Earth2Andy]

I've been banging my head over this for a couple days now and I FINALLY got it to work. The problem is with how codepen loads its scripts. i had bootstrap loaded under css and jquery under JS - but you also have to go into JS and have it load bootstrap ALSO - after jquery. suddenly all the dropdowns worked

[mindctrl]

I'm not having any problems with this and 3.0.3. Sounds like an implementation problem. Have you checked your dev tools console for errors?

[PlanBrewski]

I do agree with @mindctrl in this one, everything it working great for me in multiple themes I have running 3.0.3 so at this point I would say its an implementation issue, but I will definitely try to help you out.

Lets troubleshoot the walker first, can you please share your wp_nav_menu() declaration and the outputted HTML so we can confirm if there are any issues with the walker itself? Then we can move forward with looking at JS issues.

[jardindefleurs]

//header.php

    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav"> 
            <?php
                wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
                );
            ?>
         </ul>
        </div>
      </div>
    </div>

//functions.php:

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

// Register navigation menu
register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'MYTHEME' ),
) );

[PlanBrewski]

Everything looks good here, as mentioned I will also need to take a look at the outputted menu HTML that is rendered when the page loads.

[jardindefleurs]

  <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
       <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav"> 
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                     <ul id="menu-headermenu" class="nav navbar-nav"><li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-152 active"><a title="Home" href="http://mysite.com">Home</a></li>
                 <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-46 dropdown"><a title="About" href="#" data-toggle="dropdown" class="dropdown-toggle">About <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
              <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a title="History" href="http://mysite.com/history/">History</a></li>
            <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a title="Services" href="http://mysite.com/services/">Services</a></li>
                  </ul></li>
          <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a title="Classes" href="http://mysite.com/classes/">Classes</a></li>
          <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a title="Contact" href="http://mysite.com/contact/">Contact</a></li>
                  </ul>
             </div>         
         </ul>
      </div> 
     </div>
  </div>

Thank you so much. Again, I really do appreciate your help.
I hope you don't mind me asking another question? What am I doing incorrectly for the parent menu item to have a link value of "#" instead of the actual address?

[PlanBrewski]

I created a CodePen and loaded the default Bootstrap 3.0.3 CSS & JS and the HTML output by the walker is a valid Bootstrap menu with a working dropdown.

http://codepen.io/twittem/pen/lwbjC

This tells me thats the function you are using to load the bootstrap JS is probably throwing an error. Could you share the function that loads your JS from your functions.php

As for your other question, you are doing nothing wrong... the walker eliminates the top level link... as top level links for drop downs are not supported with Bootstrap. This is because with Bootstrap you must click to open the dropdown. This is to facilitate touch devices (this can be a phone tablet, laptop or desktop these days) and without it there is no way to access your dropdown items. I would suggest eliminating the top level page (as they are often redundant) or moving the information to a single page. Just an FYI as of Bootstrap 3.0 it also only supports one level of dropdown for the same reasons.

[jardindefleurs]

You're correct twittem! Turns out, everything is fine with the navwalker & dropdown js. The problem was with the bootstrap js being loaded twice (separate files). I removed the excess code, & everything is now working fine. (Don't know how I overlooked that!)

Thank you for all your help and information on the top level links (+ the prompt responses). It's greatly appreciated!

[PlanBrewski]

No problem, I am glad everything worked out for you!

[camilodelvasto]

Hey, sorry to re open this issue, but for me it isn't working on codepen... even the one provided by @twittem here seems broken... is this codepen related?

[pattonwebz]

Seems that both this original issue and the recent one (sorry for missing this recent issue BTW) are script loading related.

Should there be a note in the readme.MD file about loading the core files? Since navwalker assumes those to be loaded anyway I don't think it's mentioned anywhere. Perhaps if it was mentioned both these issues could have been prevented and/or resolved more quickly?

[camilodelvasto]

As @Earth2Andy comments, bootstrap's js has to be loaded as well on the js tab. That solved my issue but forgot to post the update.... anyway, perhaps codepen should warn the user when adding bootstrap, as it seems counterintuitive that you have to include it in two different tabs

@Earth2Andy Thank you so much that fixed my problem. I had both loaded but after loading them in the order you specified it worked!

[ATorresDev]

Ive been trying to use it on codepen for hours....thank you so much guys.Pretty backwards having to add bootstrap twice...