Weird issues with bootstrap navbar on smaller screens

Question

So there is a weird issue with my bootstrap navbar I am having troubles with.

Everytime I go to a smaller screen this happens! There is nothing unique about the styling other then the text font and size....

.navbar {
  font-size: 30px;
  border: 0;
  height: 65px;
}

.navbar-nav li a:hover,
.navbar-nav li.active a {
  color: #e67e22 !important;
  font-size: 45px !important;
}

.navbar-brand {
  font-size: 40px;
}

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="../home.html" style="color:black;"><b>Brandon Nolan</b></a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">


        <li><a href="#portfolioAnchor" style="color:black;"><b>Bootstrap</b></a></li>
        <li><a href="#blogAnchor" style="color:black;"><b>Spring</b></a></li>
        <li><a href="#contactMeAnchor" style="color:black;"><b>Angular</b></a></li>
        <li><a href="#aboutMeAnchor" id="b1Scroll" style="color:black;"><b>Contact</b></a></li>
      </ul>
    </div>
  </div>
</nav>

The content is overflowing the navbar. This is clearly mentioned in the docs: http://getbootstrap.com/components/#navbar — Pevara, May 07 '16 at 17:55

score 0 · Answer 1 · answered May 07 '16 at 18:02

It's not about the screen size, per se. The content in the navbar simply takes up too much space thus pushing down the links - where else would they go? What do you expect to happen?

Try removing letters of the links with your choice of browser developer tools, and you will see the menu items going back on the same row when there's enough space.

You could solve this by:

Changing the size of the links so they always fit except for when the menu is in hamburger mode.
Change so the hamburger menu appear on a higher screen width.

score 0 · Answer 2 · answered May 07 '16 at 19:41

Weird navbar's issue (or behavior) depends of its collapsing breakpoint. In this case you can overwrite this breakpoint for your needs: now, navbar collapsing when min-width: 768px, change to max-width: 1000px and it's resolving the issue.

@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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

JSFiddle

score 0 · Answer 3 · answered May 07 '16 at 20:07

You could simply use a media query to control the font-size of your links to avoid this issue all together.

@media (max-width: 991px) {
  .navbar.navbar-default .navbar-nav > li > a {
    font-size: 20px;
  }
}

Alternatively see this SO post to change the breakpoint if that makes more sense.

Sidenote: Consider using padding to change your navbar instead of height since it has side effects under 768px (the background color will no longer be visible since the navbar has a default of min-height: 50px).

Working example.

.navbar.navbar-default {
  border-color: transparent;
  padding: 15px 0;
}
.navbar.navbar-default .navbar-nav > li > a {
  font-size: 30px;
  color: #000;
  font-weight: bold;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li.active a {
  color: #e67e22;
}
.navbar.navbar-default .navbar-brand {
  font-size: 40px;
  color: black;
  font-weight: bold;
}
.navbar.navbar-default .navbar-brand:hover {
  color: #e67e22;
}
@media (max-width: 991px) {
  .navbar.navbar-default .navbar-nav > li > a {
    font-size: 20px;
  }
}

<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">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="../home.html"><b>Brandon Nolan</b></a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#portfolioAnchor">Bootstrap</a>
        </li>
        <li><a href="#blogAnchor">Spring</a>
        </li>
        <li><a href="#contactMeAnchor">Angular</a>
        </li>
        <li><a href="#aboutMeAnchor" id="b1Scroll">Contact</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

Weird issues with bootstrap navbar on smaller screens

3 Answers3