wp-bootstrap / wp-bootstrap-navwalker

A custom WordPress nav walker class to fully implement the Twitter Bootstrap 4.0+ navigation style (v3-branch available for Bootstrap 3) in a custom theme using the WordPress built in menu manager.
https://wp-bootstrap.github.io/wp-bootstrap-navwalker/
GNU General Public License v3.0
3.37k stars 1.94k forks source link

Does not work for me :( #237

Closed Halkawt97 closed 7 years ago

Halkawt97 commented 8 years ago

Here is my code, and I do not know why it does not work :(

<nav class="navbar navbar-inverse" role="navigation">
          <div class="container">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a href="#" class="navbar-brand scroll-top"><img src="http://auis-env.org/wp-content/uploads/2016/11/logoo-copy.png" style="margin:-15px 0" height="50" alt="Environment Keepers' logo"></a>
              </div>
              <!--/.navbar-header-->
              <div id="main-nav" class="collapse navbar-collapse">
                <?php
                    wp_nav_menu( array(
                        'menu'              => 'primary',
                        'theme_location'    => 'primary',
                        'depth'             => 2,
                        'container'         => 'div',
                        'container_class'   => 'collapse navbar-collapse',
                        'container_id'      => 'bs-example-navbar-collapse-1',
                        'menu_class'        => 'nav navbar-nav navbar-right',
                        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                        'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
              </div>
              <!--/.navbar-collapse-->
            </div>
            <!--/.container-->
      </nav>

can anyone tell me where is the issue ? The URL is auis-env.org

pattonwebz commented 7 years ago

Hey,

Can you explain where you're putting this code? Generally it would go in somewhere like the header.php file for this kind of navbar.

Also did you include the wp_bootstrap_navwalker.php file?

DZuz14 commented 7 years ago

Delete the surrounding div that contains the code,

<div id="main-nav" class="collapse navbar-collapse">

Bootstrap nav walker automatically adds another div without telling you, so you will end up with two different divs in your html with the same classes, which will cause the mobile menu to not work. Make sure to remove the closing div tag obviously.

For those of you having this issue, before changing it, right click and view source and check out your nav code, you will 100% see two divs with the same class names, like this,

`

pattonwebz commented 7 years ago

There has been no update from OP for a long time stating if they found the issue of if a provided solution worked. Closed this issue as inactive.