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

@hungerstar I was adding the HTML as soon as I noticed I forgot to include it. added it now. thanks for the reminder. — Green Lantern, Oct 12 '15 at 14:22

vanburen · Accepted Answer · 2015-10-13T05:17:05.830

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>

+1 Your code works, but I forgot to mention I still need the mobile functionality, there's a searchbar next to the company logo that need to become small too when the browser is shrinked. When I add back the search bar, the menu doesn't display properly. I edited my question, here's the new live demo: http://plnkr.co/edit/n9gvmUsVaPFyglnm6cIS?p=preview I'm still analyzing the CSS you applied and how the CSS should affect the responsive UI. — Green Lantern, Oct 12 '15 at 23:09
Yeah, because it seems explicit that there wasn't any other elements in the original post nothing else was provisioned for. See updated Snippet. — vanburen, Oct 13 '15 at 05:18

score 0 · Answer 2 · answered Oct 12 '15 at 14:41

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

The problem is with the menu not displaying properly when the browser is shrinked. When the chevron-down is clicked, the Login menuitem doesn't display like in full browser. See my question's screenshots. — Green Lantern, Oct 12 '15 at 23:17

Bootstrap menu displayed incorrectly when browser is shrinked

2 Answers2