When the navbar collapses (when it shows the toggle icon), the menu items (home, services, portfolio, about, contact) overlap with the logo. If I remove the position:absolute from the logo (navbar-brand), the menu appears in the center. Is there a way to have the menu below the logo? I hope you understand my question. English is not my first language. Thank you.
<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>`enter code here`
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand"><img id="brand-image" src=""><img src="images/logo.png" class="img-responsive" alt="website logo"></a>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!--end navbar-->
CSS:
.navbar {
background-color: #FFF;
border-radius: 0px;
min-height: 85px;
}
.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}
.navbar-nav > li{
padding-left: 20px;
}
.navbar .nav > li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position: absolute;
}