Twitter bootstrap - Bootstrap Nav Disappears on Resize

user1965074
August 4, 2015
210 views
0 votes
2 Answers

I have a Bootstrap 3 navbar. When I scale the browser window to a low resolution or access the page with my mobile I have no menu. Usually, with Bootstrap I have a collapsed navigation but it is nowhere to be found.

Here is the HTML:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.php">Home</a></li>
              <li class="aktiv" ><a href="advertiser.php">Advertisers</a></li>
              <li><a href="publisher.php">Publishers</a></li>
              <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a></li>
              <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a></li>
            </ul>
        </div>
      </div>
</nav>

CSS:

.navbar {
    background-color: #333E48;
    border: 0;
    display: block!important; /* From Stack Overflow */
}

.navbar-brand > img,
.navbar-brand {
    padding:0px;
    margin:0;
}

.navbar-brand > img {
    padding: 4px;
    height: 50px;
    margin: auto;
    vertical-align: middle; 
    display: inline-block;
}

.navbar-brand,
.navbar-nav li a {
    line-height: 90px;
    height: 90px;
    padding-top: 0px;
}

.nav-collapse.collapse {
    height: auto !important; /* From Stack Overflow */
    overflow: visible !important; /* From Stack Overflow */
}

I added display: block!important; to .navbar after reading Nav disappears after resize

I added height: auto !important; overflow: visible !important; to .nav-collapse.collapse after reading Twitter bootstrap responsive navigation disappears after opening and closing

Issue still persists.

Answers

Just have to remove the collapse class on div#navbar

Here is a fiddle

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.php"><img src="images/logo.png"></a>
        </div>

        <div id="navbar" class="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.php">Home</a></li>
              <li class="aktiv" ><a href="advertiser.php">Advertisers</a></li>
              <li><a href="publisher.php">Publishers</a></li>
              <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a></li>
              <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a></li>
            </ul>
        </div>
      </div>
</nav>

And rewrite the css for the xs view

It isn’t clear in your question but your missing the toggle button to open and close the menu when your viewport is reduced, otherwise the mobile menu will always be open.

nav.navbar-default  {
  background: #333E48;
  border: 0;
}
.navbar-default .navbar-brand > img,
.navbar-default .navbar-brand {
  padding: 0px;
  margin: 0;
}
.navbar-default .navbar-brand > img {
  padding: 4px;
  height: 50px;
  margin: auto;
  vertical-align: middle;
  display: inline-block;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav li a {
  line-height: 90px;
  height: 90px;
  padding-top: 0px;
}
.navbar-default .nav-collapse.collapse {
  height: auto !important;
  /* From Stack Overflow */
  overflow: visible !important;
  /* From Stack Overflow */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-collapse" aria-expanded="false"> <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="index.php">
        <img src="http://placehold.it/100x50/fff/fff" />
      </a>

    </div>
    <div class="collapse navbar-collapse" id="bs-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="index.php">Home</a>

        </li>
        <li class="aktiv"><a href="advertiser.php">Advertisers</a>

        </li>
        <li><a href="publisher.php">Publishers</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#aboutModal">About</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#pressModal">Press</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

Twitter bootstrap – Bootstrap Nav Disappears on Resize

Answers