ex1tium ex1tium - 19 days ago 4
CSS Question

Bootstrap nav pushes content below around when hovering over links

I found some similar problems but I didn't find solution to mine, because mine has some simple animations on it. So lets get down to it. I recorded short 10 second clip which showcases my problem, please look at it HERE. Please also take a look at this Bootply. Thank you for help, I just can't wrap my mind around this.
HTML

<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="">Women</a></li>
<li><a href="">Men</a></li>
<li><a href="">Junior</a></li>
<li><a href="">Accesories</a></li>
<li><a href="">Collections</a></li>
<li><a href=""><span style="color:#f05050;">Sale</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">My Account</a></li>
</ul>
</div>
</div>
</nav>
</div>


CSS

.navbar {
margin-top: 10px;
}

.navbar-default {
border-width: 0px;
border-radius: 0px;
font-size: 12px;
font-weight: bold;
color: black;
border-bottom: 5px solid #000000;
color: #FFF;
background: #fff;
}

.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
text-shadow: none;
color: #000000;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > ul > li, .navbar-default .navbar-nav > li.focus > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:visited, .navbar-default .navbar-nav > li:hover > a:hover {
background-image: #1c2b36;
background: #1c2b36;
background-color: #1c2b36 !important;
color: #FFF;
border-bottom: 5px solid #3bc0c3;
-webkit-transition: all ease-in .1s;
-o-transition: all ease-in .1s;
-moz-transition: all ease-in .1s;
-ms-transition: all ease-in .1s;
transition: all ease-in .1s;
}

Answer

The border applied takes up the extra space hence it pushes it down. Try this for the li element or a element, Whichever draws a border when you hover on it. mostly the li tag i guess

.navbar-nav>li {
  box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
}

(OR)

you can add an invisible border-bottom to li elements so that when it is hovered, only the color changes and the contents are not pushed down.Like this:

.navbar-nav>li {
    border-bottom:5px solid transparent;
}

EDIT:

According to your bootply do this:

.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
    text-shadow: none;
    color: #000000;
    border-bottom:5px solid transparent; //add this in CSS already present there
}