Collapsing abnormity with bootstrap 3 navbar

4 Views

Here i have built in a Bootstrap 3 navbar in wordpress with a commom navwalker. It should collapse when the grid-breakpoint is reached. But it shows a unexpected behaviour in the way that it shows the toggle content before the button was clicked and without the right style.

The bs collapse plugin is present. And it worked some changes before, but i made failure somewhere.

Read More

I would be thankful for your help. Here is my code: 

<div id="twitterbootstrap">
<nav class="navbar navbar-default <?php if ( !(is_front_page())): echo "navbar-fixed-top"; endif; ?>" role="navigation">
<div class="container" style="padding: 0;">
        <!-- Brand and toggle get grouped for better mobile display -->
        <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>
        </div>
        <?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',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>
Post Views: 4

Related posts

Leave a Reply

2 comments

  1. Fixed the problem:

    enter image description here

    and when the menu is expanded:
    enter image description here

    The problem here is that you are overwriting bootstrap’s default styles in your theme.css file, particularly theme.css line: 187:

    .navbar-default, .navbar .navbar-nav, .navbar-collapse {
  display: inline-block !important;
  float: none;
  font-size: 14px !important;
  height: 50px;
  margin: 0;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

    and theme.css line: 207

    .navbar-default .container div, .navbar .navbar-nav .container div, .navbar-collapse .container div, .navbar-default .container-fluid, .navbar .navbar-nav .container-fluid, .navbar-collapse .container-fluid {
  background-color: #eef8fd;
  float: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

    remove those two and you are good to go.

  2. I’ve noticed a couple of issues here, and of what I’ve messed up with Firebug so far, I’ve reached to the point where the contents of the collapse menu are not showing before the button is actually being pressed.

    This I achieved by taking off the display: inline-block !important; from .navbar-default, .navbar .navbar-nav, .navbar-collapse.

    There is still some strange issue with the collapsing menu, since it gets smacked flat right after the collapse effect actually happens. Trying to figure it out, notify me if you’re faster than me!