NAVBAR Loss of responsiveness in mobile view - html

Question

I've made my navbar a clearfix and added another ul to the right side of it, now it doesn't work in mobile view mode on Chrome?
When using mobile view the drop down button no longer works, also at some view ports it displays the bar in two lists making the navbar a lot taller?
HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
Tyres
</li>
<li>
Mags
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Locate a Store
</li>
<li>
Cart
</li>
<li>
Search
</li>
<li>
Login
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
CSS Code Below
.navbar {
font-size: 14px;
font-weight: 300;
line-height: 1.6;
min-height: 65px;
position: fixed;
}
.navbar-inverse .navbar-brand {
color: #ffffff;
}
.navbar-inverse .navbar-nav>li>a {
color: #ffffff;
float: left;
line-height: 60px;
padding: 0 30px;
text-decoration: none;
}
/* Clearfix the Navbar */
.clearfix:before, .clearfix:after,
.navbar:before, .navbar:after {
content: " "; display: table;
}
.clearfix:after,
.navbar:after {
clear: both;
}
/* Navbar styles */
.navbar-inverse .navbar-nav>li>a:hover {
background-color: #2b2b2b;
color: #ffffff;
}

Answer 1

You forget to add id to div respone to collapse, just add it and the button work fine
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Remove float: left; in class .navbar-inverse .navbar-nav > li > a and it will work
.navbar-inverse .navbar-nav > li > a {
color: #ffffff;
line-height: 60px;
padding: 0 30px;
text-decoration: none;
}
About two row menu in some viewport, i think you can add this
#media (min-width: 768px) and (max-width: 1000px) {
.container {width: auto}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
margin: 0 -15px !important;
overflow-x: hidden !important;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
.navbar-nav > li, .navbar-nav {
float: none !important;
}
.navbar-collapse.in {
overflow-y: visible !important;
overflow-x: hidden !important;
}
}
Demo