CODEWITHSUNDEEP
htmlcsscss-tables
pickarooney
pickarooney

Reputation: 415

CSS (bootstrap) : active/current tabbed menu item not highlighted

I'm modifying a bootstrap theme and have one tricky little problem (which also appears in the unmodified theme) in that when the page first loads, the active/current tab does not display as such. The tab marked FIRST should display with a cyan background when the page loads, but instead it only changes from grey to cyan when clicked.

The HTML looks like this:

<ul class="service_tabe_menu nav nav-tabs" role="tablist">
  <li role="presentation" class = "current"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">FIRST</a></li>
  <li role="presentation"><a href="#second" aria-controls="second" role="tab" 
  data-toggle="tab">SECOND</a></li>
  <li role="presentation"><a href="#third" aria-controls="third" role="tab" data-toggle="tab">THIRD</a></li>
</ul>

And the CSS like this:

.service .nav-tabs>li>a{
    text-align: center;
    color: #444444;
    width: 150px;
    height: 80px;
    margin-left:10px;
    background: url(../images/skmenubg.png) no-repeat top center;
    border:0px;
    transition: all 0.6s;
}
.service_tabe_menu.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
    background: url(../images/skmenubgh.png) no-repeat top center;
    width:150px;
    height: 80px;
    color:#fff;

}
.service_tabe ul li a:hover{
   background: url(../images/skmenubgha.png) no-repeat top center;
   color:#fff;
}

.service_tabe_menu li nav nav-tabs li.current a:active {
   background: url(../images/skmenubgh.png) no-repeat top center;
   color:#fff;
}

.service_tabe ul li a i{
    font-size:2rem;
    margin-top:40px;
    margin-bottom:25px;
}

.service .tab-content{
    margin-top:100px;
}

Am I going about it the wrong way? edit: update based on feedback

Upvotes: 0

Views: 274

Answers (1)

1Bladesforhire
1Bladesforhire

Reputation: 360

You are missing some letters/classes in your stylesheet. codepen with fixes

You want to make sure that you are providing the correct classes for the javascript, so you are using active and current, usually you will only have one. You need to assign the active class in the html so that the css/js knows what is active on loading the page. Additionally, you would target the li as either .service_tabe_menu li or ul li since the ul has the class service_tabe_menu, you don't use .service_tabe_menu ul because there is no ul inside that class. Hope this helps.

Upvotes: 1

Related Questions