Bootstrap menu displayed incorrectly when browser is shrinked

Question

The menu is ok when the browser is not shrinked

Upon shrinking, the menu does not display correctly

Here's the Live Demo: http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

Here are the stylings that I used:

    @media (max-width: 767px) {
        .navbar .navbar-form {
            width: 200px;
            padding-left: 0;
            padding-right: 0;
        }
    }      
    @media (min-width: 768px) {
        .navbar .navbar-form {
            width: 400px;
        }
    }      
    .navbar .navbar-form {
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }              
    .navbar-collapse.collapse {
        display: block !important;
    }      
    .navbar-nav > li, .navbar-nav {
        float: left !important;
    }      
    .navbar-nav.navbar-right:last-child {
        margin-right: -15px !important;
    }      
    .navbar-right {
        float: right !important;
    }

I used the last four navbar stylings above to disable the navbar from collapsing, I removed the burger menu too.

Here's the html that uses the above stylings and a dropdown menu:

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="nav navbar-nav navbar-left">

            <a class="navbar-brand hidden-xs" ui-sref="root.list.home">My shop</a>
            <a class="navbar-brand visible-xs" ui-sref="root.list.home"><span
                    class="glyphicon glyphicon-shopping-cart"></span></a>

            <div class="pull-left">

                 <form class="navbar-form" role="search" ng-submit="c.Product.search()">

                  <div class="input-group">


                      <input type="text" class="form-control" name="srch-term" id="srch-term"/>


                      <div class="input-group-btn" style="width:1%">
                          <button class="btn btn-default btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i>
                          </button>
                      </div>


                  </div>

              </form>


            </div>


        </div>


        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden-xs"><a ui-sref="root.item.postAd">My home</a></li>
                <li class="visible-xs">
                    <a ui-sref="root.item.postAd">
                        <span class="glyphicon glyphicon-home"></span>
                    </a>
                </li>

                <li uib-dropdown>
                    <a uib-dropdown-toggle href="#">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                    </a>
                    <ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown">
                        <li><a ui-sref="root.login">Log in</a></li>
                    </ul>
                </li>

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

What could be the reason why the menu doesn't render correctly when the browser is shrinked?

Here's the Live Demo: http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview

Answer 1

If you don't want any of the mobile functionality in your navigation your have to remove most the classes (or override them width other rules) associated with the nav itself. Your dropdown is still collapsing as it should under 768px because of the navbar-nav class.

*I beleive you're also using a UI-Bootstrap Dropdown Button instead of the navbar dopdown class, so if you have to use the button you'll most likely have to compensate for it with additional CSS.

.navbar.navbar-custom {
  padding-top: 5px;
  height: 50px;
}
.navbar.navbar-custom .navbar-navbar {
  display: inline;
}
.navbar.navbar-custom .nav > li > a,
.navbar.navbar-custom .nav > li > a:hover,
.navbar.navbar-custom .nav > li > a:focus {
  color: white;
  background: none;
  text-decoration: none;
}
.navbar.navbar-custom .nav-right li.dropdown .dropdown-menu {
  margin-top: 5px;
  right: 0;
  left: auto;
}
.navbar.navbar-custom .nav.nav-left {
  float: left;
}
.navbar.navbar-custom .nav.nav-right {
  float: right;
}
.navbar.navbar-custom .nav.nav-right > li,
.navbar.navbar-custom .nav.nav-left > li {
  display: inline-block;
}
.navbar.navbar-custom .nav-form {
  width: 300px;
  padding: 3px 15px;
  float: left;
}
@media (max-width: 767px) {
  .navbar.navbar-custom .navbar-navbar .nav .no-link {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar.navbar-custom .navbar-navbar .nav .glyphicon:nth-last-child(2) {
    display: none;
  }
}
@media (max-width: 480px) {
  .navbar.navbar-custom .nav-form {
    width: 53%;
  }
}
@media (max-width: 320px) {
  .navbar.navbar-custom .nav-form {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
  <div class="container">
    <div class="navbar-navbar">
      <ul class="nav nav-left">
        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> <span class="no-link">My shop</span></a>

        </li>
      </ul>
      <form class="nav-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>

        </div>
      </form>
      <ul class="nav nav-right">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> <span class="no-link">My home</span></a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span> </a>

          <ul class="dropdown-menu">
            <li><a href="#"> Log in</a>

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

Answer 2

An inherent margin is coming back into play. In bootstrap's default CSS, there's a code that says:

@media (min-width: 768px) {
    .navbar-nav {
        margin: 7.5px -15px;
    }
}

So basically, you have a top and bottom margin on your navbar when your screen is below 768px. You could solve it by redefining the .navbar-nav element's margins.

When I add this code to your inline styles, it modifies the margins. You could play with this and get it to exactly your liking.

.navbar-nav {
  margin: 0 -15px;
}

Play with it on this plunkr.

Cheers