CODEWITHSUNDEEP
csstwitter-bootstrap
dsamardjiev
dsamardjiev

Reputation: 400

Changing style on bootstrap tabs active

Ok so I'm having some issues changing the active state on my bootstrap tabs. I managed to get the hover to work but there is still some issues I am running into.

This is what I am currently using for the hover, I need the active state to be the same but I'm not sure how to do that.

.services-icon-holder {
border: 2px solid #272727;
border-radius: 50%;
width: 65px;
height: 65px;
margin-bottom: 40px;
}

.services-icon-holder:hover {
background-color: #272727;
cursor: pointer;
}

.services-icon {
font-size: 28px;
color: #272727;
line-height: 2.2 !important;
padding-bottom: 15px;
}

.services-icon-holder:hover .services-icon {
color: #f1f1f1;
cursor: pointer;
  -webkit-transition: color 0.5s ease;
}

I also have an issue with the active tab being 1 or so pixels above the rest of the tabs, I used inspect element to try and find where this is coming from but to no success.

You can check out the live site here (just go to services section to see the tabs)

Upvotes: 1

Views: 2231

Answers (2)

Faiz Shukri
Faiz Shukri

Reputation: 95

In /css/style.css:517

.services .nav > li > a {
  /* Add below */
  border: none;
}

And for active state color, you can add this code to your style

.nav-tabs > li.active .services-icon-holder {
    background-color: #000;
}

.nav-tabs > li.active .services-icon-holder > .services-icon {
    color: #fff;
}

Upvotes: 1

ShibinRagh
ShibinRagh

Reputation: 6646

Please manage this code , this is the css structure

.services .nav > li > a {
  outline:none ! important;
  border: none;
}


.services .nav > li.active > a .services-icon-holder {
   background-color: #272727;
   cursor: pointer;
}

Upvotes: 2

Related Questions