In image(given below) navbar is not taking full width.I want it will take full width in small screen(<600px).Relative code and screenshot are given below.I tried in many ways but failed.
HTML:
<header class="header-area">
<nav class="header-nav navbar">
<div class="container-fluid">
<ul class="nav navbar-nav text-center text-uppercase">
<li><a href="#">About us</a></li>
<li><a href="#">Work</a></li>
<li>
<a href="#">
<img src="images/logo1.png" class="img-responsive" alt="website-logo" style="width: 80px;height:auto;"/>
</a>
</li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
CSS:
header-area {
background: url("images/background1.jpg") no-repeat 0 0 / 100% 100%;
color: #84828D;
padding-bottom: 474px;
}
.header-nav .nav, .header-nav .nav.navbar-nav {
width: 100%;
float: inherit;
}
.header-nav.navbar .nav, .navbar .nav > li {
float: inherit;
display: inline-block;
vertical-align: middle;
}
MEDIA-QUERY:
@media all and (max-width: 600px) {
.navbar .nav > li {
display: block;
}
.navbar .nav > li img {
margin: auto;
}
}
Well add some line to your media query like this
@media all and (max-width: 600px) {
.container-fluid {
padding:0; /* Extend your menu really full width without padding of container-fluid */
}
.navbar-nav {
margin:0; /* Center your menu with current 100% width available */
}
.navbar .nav > li {
display: block;
}
.navbar .nav > li img {
margin: auto;
}
}
Hope this help!