user3771570 user3771570 - 4 months ago 9
jQuery Question

Bootstrap 3 Active state causes error on Navigation bar

I'm creating a static navigation bar with a JQuery active state border bottom when I select one of the navigation options.

However, I think Bootstrap 3 is causing a weird issue with the active state, because whenever I click on one of the links the spacing of the Navigation links gets smaller and the li shift to the top.

Is there a way to prevent Bootstrap 3 active state from shifting my Navigation links?

UPDATE I figured out that the problem was the 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: For some reason I can't get the dropdown menu to work either I don't want it to highlight on hover or on active state, I just want it to bring down a dropdown list when I click on it. Thank you!

https://jsfiddle.net/DTcHh/23151/

CSS:

/* Latest compiled and minified CSS included as 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 a {
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>

Answer

see here jsfiddle

  1. if you add a border to a.active you must make sure the space for that border is already there, or you will have some visual problems. so use :

    border-bottom:4px solid transparent;
    
  2. you have a class tabs__link on a before you click. to that class you have a css style of display:block. by removing all the classes that a has, you loose that style. so you need to add display:block to a also.

so in the end you have this code

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