CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapnav-pills
rob12345
rob12345

Reputation: 29

Using div inside of bootstrap nav-pill

I'm trying to make the bootstrap nav-pills take up less space in mobile view, by default they stack on top of each other. This uses quick a lot of space. What I'm trying to achieve is getting two pills per line. So far I have got everything working with exception to the active class. When I click a pill it becomes active but doesn't take the active class away from the previous active pill.

The html I'm using is:

<ul class="nav nav-pills nav-justified" role="tablist">
   <div class="row">
      <div class="col-xs-6">
        <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
        <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
        <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
      </div>
      <div class="col-xs-6">
        <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
        <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
        <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
      </div>
   </div
</ul>

I had to remove the > from the CSS relating to the pills to ensure the styling worked. Because of the li no being directly after the ul. So thats all good.

.nav li a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav li a:hover,
.nav li a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav li.disabled a {
 color: #777;
}
.nav-pills li {
 float: left;
}
.nav-pills li a {
 border-radius: 4px;
}
.nav-pills li + li {
 margin-left: 2px;
}
.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li.active a:focus {
 color: #fff;
 background-color: #337ab7;
}
.nav-justified {
 width: 100%;
}
.nav-justified li {
 float: none;
}
.nav-justified li a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}

My only issue now that I can think of is the maybe the <div class="row">...</div> and the <div class="col-xs-6">...</div> are getting in the way with the bootstrap.js file when the active toggle works.

But.. I'm no expert with JavaScript as you can probably tell so I need so help to figure out if this is possible.

Thanks

Rob

Upvotes: 0

Views: 1662

Answers (2)

Simon
Simon

Reputation: 66

You can do this using only CSS and HTML. The issue you have is adding a row and col-xs-6 divs nested inside your nav li. An li element expects ul/ol tags as its immediate children - Bootstrap certainly does.

The way to solve your problem is to remove those extra divs inside the ul and then use display: inline-block on the li's, setting their width to 49%. It has to be less than 50% to keep two elements on the same line for some reason.

Here is the changed HTML code:

<ul class="nav nav-pills nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#club" aria-controls="home" role="tab" data-toggle="tab">The Club</a></li>
    <li role="presentation"><a href="#mens" aria-controls="profile" role="tab" data-toggle="tab">Men's Captains</a></li>
    <li role="presentation"><a href="#womens" aria-controls="messages" role="tab" data-toggle="tab">Ladies' Captains</a></li>
    <li role="presentation"><a href="#stash" aria-controls="settings" role="tab" data-toggle="tab">Stash Captain's</a></li>
    <li role="presentation"><a href="#socialsecs" aria-controls="settings" role="tab" data-toggle="tab">Social Sec's</a></li>
    <li role="presentation"><a href="#experiance" aria-controls="settings" role="tab" data-toggle="tab">Hockey Experience</a></li>
</ul>

And here is the key css:

.nav-justified li {
   width: 49%;
   display: inline-block;
}

Upvotes: 1

gantoine
gantoine

Reputation: 1275

This should do it!

$(function(){
  $('li[role="presentation"]').on('click', function(e){
    $('ul[role="tablist"] li').removeClass('active');
    $(this).addClass('active');
  })
})

JSFiddle

Upvotes: 0

Related Questions