Tabs Shortcode - Stretch Tabs

Support
#1

I’ve added the tabs shortcode to my page with multiple additional tabs created. I’m wondering how to stretch those tabs across the length of the tab container.

https://syfc.somersetinteractive.com/

After adding the additional 5 tabs, they started pulling away from the right side.

Thanks

#2

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

ul.x-nav.x-nav-tabs.seven-up.top {
    display: flex;
}
ul.x-nav.x-nav-tabs.seven-up.top .x-nav-tabs-item {
    flex-grow: 1;
}

@media (max-width: 767px){
    ul.x-nav.x-nav-tabs.seven-up.top {
        flex-direction: column;
    }
}


Hope it helps :slight_smile:

#3

Looks good. Thanks

#4