vast tabber - need help styling tabs

Develop, Build & Integrate CMS Development
1

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

2

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

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

Appreciate!

Reddot