vast tabber - need help styling tabs

[reddot]

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

[Kevin-C · Accepted solution]

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;
  } 
}

[reddot]

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

Appreciate!

Reddot