vast tabber - need help styling tabs

Highlighted
Contributeur occasionnel

https://www.sonicu.com/room-conditions-mockup

Hi - I'd like to style the tabs mid-way down on this page so the active tab is a different color than rest of them. Can anyone suggest a way to accomplish this?

 

Also it would be nice to be able to make the tabs larger L-R so they are not so close together.

 

Thanks,

 

Chris

 

Répondre
0 Vote / Votes
2 RÉPONSES 2
Conseiller

Hey @reddot 

 

The tabber uses a class called active to label the current tab, so you sould be able to modify the styling with that class.

 

.tabber-wrap .tabber-tabs li.active a {
  background-color: red; // change color here
}

To make the tabs wider by setting the size of the LI

@media screen and (min-width:768px) {
.tabber-wrap .tabber-tabs li {
  width: calc(100% / 5);
  text-align: center
  }
}

or by changing the padding of the a tag inside the LIs

@media screen and (min-width:768px) {
  .tabber-wrap .tabber-tabs li a {
    padding-left: 2em;
    padding-right 2em;
  } 
}
Contributeur occasionnel

Thanks Kevin-C! This got me on the right track.

 

Appreciate!

 

Reddot