Navbar toggle button opens then immediately closes when set to display toggle button at specific pixels [duplicate]

I've been learning bootstrap 3 and sass for last few days. Anyway, I'm trying to make a navbar that collapses when screen size is below 1000px. And it works, but when I click on toggle button, to show menu dropdown, it opens, then instantly closes.

Here is the code: http://jsbin.com/zahatekisa/edit?html,css,output

.navbar {
  background-color: #202C39;
}
div.navbar-header a.navbar-brand {
  font-family: "Caveat Brush";
  margin-right: 20px;
  font-size: 23px;
  color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
  color: #ffb36b;
}
ul.nav.navbar-nav li a {
  font-family: "PT Sans", "cursive";
  color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
  color: #ffffff;
  background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
  display: block;
}
@media (max-width: 1050px) {
  ul.navbar-right li a {
    float: left;
  }
  ul.navbar-right li p.navbar-text {
    margin-left: 15px;
    position: relative;
    top: -4px;
  }
}
@media (max-width: 1000px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <!--Making the toggle button-->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--Logo-->
      <a href="#" class="navbar-brand">Lorem ipsum dolor.</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <p class="navbar-text">Contact Me:</p>
        </li>
        <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

How do I make my navbar not collapse?

For navbars that never collapse, add the . navbar-expand class on the navbar. For navbars that always collapse, don't add any . navbar-expand class.

How do I put two navbar-collapse content in the same line?

Wrap both #nabar-mid-collapse and #navbar-rt-collapse in a div with class row-fluid , and apply class col-xs-4 (*or any respective . col class according to the width you need for each item *) to both of them. There is no row-fluid in Bootstrap 3.

What does the navbar Toggleable -* class do?

navbar-toggleable-* classes to alter when their information collapses behind a button . In combination with alternative utilities, you are able to simply pick when to present or cover specific features.

The problem here is this particular style you have, which is forcing the navbar to be hidden regardless of whether it is open or closed:

@media (max-width: 1000px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
}

I can see what you're doing here - you're trying to combine Bootstrap's .collapse class with your own custom addition to the navbar. However, there's a problem with your logic: I suspect you wrote your style under the assumption that Bootstrap toggles .collapse to hide or show collapsed content. This is incorrect. In fact, Bootstrap toggles .in for this - so you should not be hiding the content if the element has the class .in. Simply change your selector to:

@media (max-width: 1000px) {
    .navbar-collapse.collapse:not(.in) {
        display: none !important;
    }
}

Here's the fix in context:

.navbar {
  background-color: #202C39;
}
div.navbar-header a.navbar-brand {
  font-family: "Caveat Brush";
  margin-right: 20px;
  font-size: 23px;
  color: #F29559;
}
div.navbar-header a.navbar-brand:hover {
  color: #ffb36b;
}
ul.nav.navbar-nav li a {
  font-family: "PT Sans", "cursive";
  color: #e6e6e6;
}
ul.nav.navbar-nav li a:hover {
  color: #ffffff;
  background-color: #2a394a;
}
ul.navbar-right li p.navbar-text {
  display: block;
}
@media (max-width: 1050px) {
  ul.navbar-right li a {
    float: left;
  }
  ul.navbar-right li p.navbar-text {
    margin-left: 15px;
    position: relative;
    top: -4px;
  }
}
@media (max-width: 1000px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse:not(.in) {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
  }
  .navbar-nav > li {
    float: none;
  }
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <!--Making the toggle button-->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--Logo-->
      <a href="#" class="navbar-brand">Lorem ipsum dolor.</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
        <li><a href="#">Lorem</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <p class="navbar-text">Contact Me:</p>
        </li>
        <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-skype" aria-hidden="true"></i></a>
        </li>
        <li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
        </li>
      </ul>
    </div>
  </div>
</nav>

(Something else worth noting is that you may want to use max-width: 768px rather than max-width: 1000px for your media query, since that's the Bootstrap breakpoint for "tablet" sized devices.)

Navbar toggle button opens then immediately closes when set to display toggle button at specific pixels [duplicate]

Tags:

css

twitter-bootstrap

navbar

toggle

bawsi

People also ask

1 Answers

Serlite

Recent Activity

Donate For Us

Navbar toggle button opens then immediately closes when set to display toggle button at specific pixels [duplicate]

Tags:

css

twitter-bootstrap

navbar

toggle

bawsi

People also ask

1 Answers

Serlite

Related questions

Recent Activity

Donate For Us