Custom DIVI Tabs style

Here is a custom DIVI tabs style.

Simply paste the into custom CSS and change the CSS class of the tab module to: divi-style-tabs

@media (min-width: 981px) {
/*set a minimum height (at least as tall as your tallest tabs content) for the tab section so the page doesnt jump with different tab content heights*/
.divi-style-tabs .et_pb_tabs {min-height:500px;}
 
/*edit the tab BG + text/hover colour for tab text*/
/*width % is dependant on how many tabs you want. 100/number of tabs=xx%*/
.divi-style-tabs .et_pb_tabs_controls li {width: 14.3%; background-color: #fff!important;}
.divi-style-tabs .et_pb_tabs_controls li a { min-width: 60px; text-align: center; display: block; margin-top:-30px;padding-top: 60px!important; color:#ccc} /*alignment and size of tab icon/text*/
.divi-style-tabs .et_pb_tabs_controls li a:hover { color:#333; }
}


0 comments:

Post a comment