Bootstrap: How do I keep the navigation from truncating? - html

Question

I am working on a Bootstrap 3 site and have everything working except the main menu. It has a hair trigger when it comes to resizing and truncates well in advance of the overall page sizing and quickly drops the last two navigation items to the next row, disrupting the slider, before it adjusts to the mobile navigation.
The page can be found here.
The HTML is as follows:
<!-- Navigation -->
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Our Attorneys</li>
<li>Business Ligitagion</li>
<li>Personal Injury</li>
<li>Verdicts & Settlements</li>
<li>Client Testimonials</li>
<li>Map & Directions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- container -->
</div><!-- navbar -->
The CSS:
/* #group navigation */
.navbar {
position: relative;
min-height: 35px;
margin-bottom: 0;
}
.navbar-default {
background-color: #9d2024;
border: none;
height: 25px;
}
#media (max-width: 767px) {
.navbar-default {
min-height:50px;
}
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #fff;
border-bottom: 6px solid #fff;
}
.navbar-default .navbar-text {
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
padding: 3px 10px;
margin: 5px 0 0 0;
border-right: 1px solid #fff;
font-family: trebuchet ms;
text-transform: uppercase;
}
.navbar-default .navbar-nav > li:last-child > a {
border: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #fff;
border-bottom: 4px solid #fff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
border-bottom: 4px solid #fff;
background-color: #9d2024;
}
If I remove the container the navigation floats to the far left and does not flow with the page. I could use some insight for getting the navigation to resize properly without truncating.

Answer 1

You need yo use right bootstrap structure.
Problem is here:
row bannerand row slider-bg divs classes. Just remove row name and all need to work.
Error reason of start building a bootstrap is put a row of parent of container class. Container is first wrapping class in bootstrap, then comes row and then cols
For menu use smaller font size or inner li, a paddings.