JZK JZK - 22 days ago 5
CSS Question

Style Bootstrap active tab

How I can style Bootstrap active tab, when I'm using the class

nav-tabs-unstyled
. I've been through tons of tutorials on the web, but nothing's worked for me. This is the code, which I was believing should work.
Thank you for any help :)

SCSS

.event-menu {
a {
color: #666666;
text-decoration: none;
}

.nav-tabs-unstyled > li.active > a,
.nav-tabs-unstyled > li.active > a:focus,
.nav-tabs-unstyled > li.active > a:hover {
border: 1px solid #666666 !important;
}

ul {
margin-right: 0!important;
list-style-type: none;
padding-left: 10px!important;

li {
width: 100%;
margin-bottom: 5px;
padding: 10px;
font-weight: 400;
border: 1px solid #fff;

&:hover {
border: 1px solid #666666;
}

span {
font-size: 120%;
}
}
}
}


HTML

<div class="event-menu">
<ul class="nav-unstyled nav-tabs-unstyled">
<a href="#tab1" data-toggle="tab"><li class="active">abcd<br>
<span>aaa</span></li></a>
<a href="#tab2" data-toggle="tab"><li>ssssss<br>
<span>vvvv</span></li></a>
<a href="#tab3" data-toggle="tab"><li>ddddd<br>
<span>nnnn</span></li></a>
</ul>
</div>

Answer

You can't put block-level elements inside inline elements. It means you can't put <li> inside <a>. And as you put it in your html code, li is child of a, but your css-rules define a as child of li:

.nav-tabs-unstyled > li.active > a... 

this rule won't work.

To style active tab you have to define a style for <li class="active">, thus css rule should look, for example:

.nav-tabs-unstyled > li.active {
    border: 1px solid #666666 !important;
    background-color: #9d9;
    }

To highlight hovered li define the rule:

.nav-tabs-unstyled > li:hover{
        border: 1px solid #669;
        background-color: #99d;
        }