Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 29, 2023 at 10:23 am #1428989
    oestersund

    Dear Team,
    on my page below I us the tab section with 5 tabs. 2 questions:

    How can I increase the tab / tab section title width, i.e. that all 5 tabs titles cover the whole section? Currently It is much narrower vs. the tab content width and the other sections above & below

    How can I avoid capitals in the tab title font? I only did find a css code too increase the font size

    thx a lot & best regards Tilman

    December 29, 2023 at 5:30 pm #1429003
    Mike

    Hey Tilman,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (min-width: 767px) { 
.js_active .av-tab-section-tab-title-container {
display: flex!important;
justify-content: space-around;
align-items: flex-end;
}
}
#top .av-inner-tab-title {
    text-transform: none;
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    December 29, 2023 at 8:52 pm #1429008
    oestersund

    cool, thx a lot Mike.

    And if this is now too wide – how to make it a litte enarrower? :-)

    December 30, 2023 at 12:45 pm #1429015
    Mike

    Hi,
    Try adding padding to suit, this is an example:

    @media only screen and (min-width: 767px) { 
.js_active .av-tab-section-tab-title-container {
display: flex!important;
justify-content: space-around;
align-items: flex-end;
padding: 0 50px;
}
}
#top .av-inner-tab-title {
    text-transform: none;
}

    note the added code: padding: 0 50px;

    Best regards,
    Mike

    January 6, 2024 at 9:19 pm #1429437
    oestersund

    thx a lot Mike

    And finally: Is there a code to change the background color of
    – active tab ?
    – tab on hover ?

    Cheers, Tilman

    January 6, 2024 at 9:29 pm #1429440
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .av-tab-section-outer-container .av-active-tab-title.av-section-tab-title,
#top .av-tab-section-outer-container .av-section-tab-title:hover {
    background-color: #fff;
}

    adjust color to suit.

    Best regards,
    Mike

    January 7, 2024 at 11:29 am #1429448
    oestersund

    thx Mike,
    it works, but unfortunately this code turns all headings in capitals and destroys navigation layout across the whole page

    January 7, 2024 at 1:01 pm #1429453
    Mike

    Hi,
    Check that you are not missing bracket in your css, otherwise remove the css you added and then copy again carefully from the forum and not an email notification so the symbols are not converted and try adding again, or add it to your WordPress ▸ Customize ▸ Additional CSS

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.