How to make two rows for tabs section?

Hey amyncuih,

Thank you for the inquiry.

You can use this css code to limit the tab section title row to a maximum of 6 items.

#top .av-tab-section-tab-title-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#top .av-tab-section-tab-title-container > * {
    flex: 0 0 calc((100% / 6) - (10px * 5 / 6));
    max-width: calc((1310px - (10px * 5)) / 6);
    box-sizing: border-box;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can apply a custom css class (e.g “av-tab-section-title-limit”) to the tab sections where you need the modifications, then adjust the selectors in the css rules accordingly. Please check this documentation for more information on how to apply custom css class names to the elements.

— https://kriesi.at/documentation/enfold/add-custom-css/

#top .av-tab-section-title-limit .av-tab-section-tab-title-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#top .av-tab-section-title-limit .av-tab-section-tab-title-container > * {
    flex: 0 0 calc((100% / 6) - (10px * 5 / 6));
    max-width: calc((1310px - (10px * 5)) / 6);
    box-sizing: border-box;
}

Best regards,
Ismael