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