html - Bootstrap nav pushes content below around when hovering over links -

i found similar problems didn't find solution mine, because mine has simple animations on it. lets down it. recorded short 10 second clip showcases problem, please @ here. please take @ bootply. thank help, can't wrap 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 > {     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: ease-in .1s;     -o-transition: ease-in .1s;     -moz-transition: ease-in .1s;     -ms-transition: ease-in .1s;     transition: ease-in .1s; } 

the border applied takes space hence pushes down. try li element or element, whichever draws border when hover on it. li tag guess

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

(or)

you can add invisible border-bottom li elements when hovered, color changes , contents not pushed down.like this:

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

edit:

according bootply this:

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