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

Hey hegartpetersen,

Thank you for the update.

If you prefer wrapping the title container into multiple rows, please try to add this css code:

#top .av-tabs-scrollable .av-tab-section-outer-container {
    overflow: visible;
}

#top .av-tabs-scrollable .av-tab-section-tab-title-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    min-width: unset !important;
    left: 0 !important;
    white-space: normal;
}

#top .av-tabs-scrollable .av-section-tab-title {
    flex: 0 0 auto;
}

Note that this will hide the arrow indicator beneath the active tab since it depends on the container’s positioning logic. Please refer to the documentation on adding custom css classes to elements:

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

Let us know the result.

Best regards,
Ismael

Hi,
Glad that you have this sorted out now, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

Best regards,
Mike