jquery - Bootstrap 3 Active state causes error on Navigation bar -

i'm creating static navigation bar jquery active state border bottom when select 1 of navigation options.

however, think bootstrap 3 causing weird issue active state, because whenever click on 1 of links spacing of navigation links gets smaller , li shift top.

is there way prevent bootstrap 3 active state shifting navigation links?

update figured out problem jquery active selector i'm still troubleshooting it: https://jsfiddle.net/88z02dx6/

$('.vnavbar ul li a').click(function() {     $('active').removeclass();      $(this).addclass('active a'); });  

bonus: reason can't dropdown menu work either don't want highlight on hover or on active state, want bring down dropdown list when click on it. thank you!

https://jsfiddle.net/dtchh/23151/

css:

/* latest compiled , minified css included external resource*/  /* optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');  .bodyh {height:100%; background-color:blue;}  .tabs {     margin:  0;     padding: 0;     list-style: none;     display: table; /* [1] */     table-layout: fixed; /* [2] */     width: 100%; /* [3] */ }      .tabs__item {         display: table-cell; /* [4] */     }          .tabs__link {             display: block; /* [5] */         }   /**  * primary nav. extends `.tabs`.  *  * 1. stop tabs’ corners leaking out beyond our 4px round.  */ .primary-nav {     text-align: center;  height:48px; position: relative;     overflow: hidden; background:#333 !important; border-radius: 0 !important; /* [1] */ }          .primary-nav {             padding: 1em;             color: #fff;             font-weight: bold;             text-decoration: none;         }          .primary-nav a:hover {             background-color: #666;         }  .primary-nav a.active {   border-bottom: 4px solid #f90;  color: #f90;   padding:1em;  } 

html

    <li class="tabs__item">         <a href="#" class="tabs__link">content</a>     </li>      <li class="tabs__item">         <a href="#" class="tabs__link">search</a>     </li>     <li class="tabs__item">         <a href="#" class="tabs__link">profile</a>     </li>     <li class="tabs__item">         <a href="#" class="tabs__link">voozlr</a>     </li>     <li class="tabs__item">         <a href="#" class="tabs__link">store</a>     </li>        <li class="tabs__item">         <a href="#" class="tabs__link">mail</a>     </li>                  <li class="dropdown tabs__item">               <a href="#" class="dropdown-toggle tabs__link" dropdown-toggle="" data-toggle="dropdown">me <b class="caret"></b>                </a>              <ul class="dropdown-menu" role="menu">               <li>                 <a href="#">action</a>               </li>               <li>                 <a href="#">another action</a>               </li>               <li>                 <a href="#">something else here</a>               </li>               <li>                 <a href="#">separated link</a>               </li>             </ul>           </li>  </ul>            </nav>                   <!-- /.navbar-collapse -->         </header>   <div class="bodyh"></div> 

a. see here jsfiddle

1. if add border a.active must make sure space border there, or have visual problems. use :

   border-bottom:4px solid transparent; 

2. you have class tabs__link on a before click. class have css style of display:block. removing classes a has, loose style. need add display:block a also.

so in end have code

 .primary-nav {         padding: 1em;         color: #fff;         font-weight: bold;         text-decoration: none;         display:block;         border-bottom:4px solid transparent;     } 

b. or way ( here include solution dropdown menu )

see here jsfiddle

1. to keep class dropdown-toggle on a inside li.dropdown , , keep tabs__link class, should use ( don't need add display:block on a in previous solution )

   $('li:not(.dropdown) a').attr('class', 'tabs__link'); $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link'); 

2. for .dropdown-menu work first need delete overflow:hidden .primary-nav . need little jq slidetoggle() .dropdown-menu when click on a.dropdown-toggle

   if($(this).hasclass('dropdown-toggle')){     $(this).siblings(".dropdown-menu").slidetoggle() }else{     $(".dropdown-menu").slideup() } 

so. in end have jq this

$('.vnavbar ul li a').click(function() {     $('li:not(.dropdown) a').attr('class', 'tabs__link');     $('li.dropdown a').attr('class', 'dropdown-toggle tabs__link');      $(this).addclass('active');      if($(this).hasclass('dropdown-toggle')){         $(this).siblings(".dropdown-menu").slidetoggle()     }else{     $(".dropdown-menu").slideup()     }  });