CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
mattfiedler
mattfiedler

Reputation: 5

Collapsed Nav Disappears After Clicking

I'm having a weird issue where the collapsed menu is flashing once then disappearing after reducing the screen size to mobile. Any help would be much appreciated

Here's a link to the live site, code is below

<nav class='navbar navbar-default navbar-fixed-top main-nav no-margin-bottom' role='navigation'>
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class='container'>
    <div class='navbar-header padding-bottom margin-bottom'>
      <button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </button>
      <a class='navbar-brand' href='<?php echo get_option('home'); ?>'>
        <div class='logo'></div>
      </a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
      <ul class='nav navbar-nav navbar-right'>
        <li>
          <a class='btn btn-default navbar-btn' href='<?php bloginfo('url'); ?>/request-an-invite/'>Request an invite</a>
        </li>
      </ul>
      <?php wp_nav_menu( array('menu' => 'Main', 'container' => '', 'items_wrap' => '<ul class="nav navbar-nav navbar-right">%3$s</ul>' )); ?>
    </div>
  </div>
</nav>

Upvotes: 0

Views: 1704

Answers (1)

isherwood
isherwood

Reputation: 61056

You seem to be fighting Bootstrap with your custom CSS For example:

.navbar-collapse.collapse {
    display: none !important;
}

I'd strip all your custom CSS relating to the navbar and add it back in only if necessary and one line at a time.

I'd also combine your two navbars into one. A list with one item isn't much of a list.

Upvotes: 1

Related Questions