navbar-nav links move in different resolutions/media querys? - html

Question

I'm having an issue when my website is viewed in resolutions that have a width of 768-889 the links appear as the following;
I know that by using media query I can resolve this however I dont know which.
I know that its within the tablet media query as demonstrated below with the min and max width.
I have changed
.navbar-nav > li {
fontsize, padding
and also
.navbar .navbar-nav {
fontsize, padding,position:absolute;, justified etc.
/* tablets */
#media (max-width: 991px) and (min-width: 768px) {
.slider-size {
height: auto;
}
.slider-size > img {
width: 80%;
}
.navbar-nav > li {
font-size; 14px;
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
HTML as requested..
<div id="container">
<header class="clearfix">
<div class="navbar navbar-default">
<!-- 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">
<i class="glyphicon glyphicon-resize-vertical" style="font-size: 16px;color:#04fa00"></i>
</button>
<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" rel="home" href="#">
<img style="max-width:100px; margin-top: -16px;"
src="/images/mainlogo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>TESTIMONALS</li>
<li>GALLERY</li>
<li>CONTACT</li>
<li>ADMIN</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.navbar navbar-default -->
</header>
any help would be grateful. I know its something simple :?

Answer 1

Try this:
Its very simple !!
Remove all those css and use this:
a {
padding: 20px 10px 20px 10px !important;
}
.item {
text-align: center;
width: auto;
}
.bs-example {
margin: 10px;
}
.slider-size {
width: 100%;
}
.carousel {
width: 80%;
margin: 0 auto; /* center your carousel if other than 100% */
}
/* Mobile */
#media (max-width: 767px) {
.slider-size {
height: 250px;
}
.slider-size > img {
width: 80%;
}
.navbar-default .navbar-nav > li > a {
line-height: 25px;
}
/* tablets */
#media (max-width: 991px) and (min-width: 768px) {
.slider-size {
height: auto;
}
.slider-size > img {
width: 80%;
}
.navbar-default .navbar-nav > li > a {
padding: 30px 30px 30px 30px !important;
}
}
/* laptops */
#media (max-width: 1023px) and (min-width: 992px) {
.slider-size {
height: 200px;
}
.slider-size > img {
width: 80%;
}
}
/* desktops */
#media (min-width: 1024px) {
.slider-size {
height: 200px;
}
.slider-size > img {
width: 60%;
}
.navbar-default .navbar-nav > li > a {
line-height: 25px;
}
}
}
Hope your problem will be solved !