Tagged: , , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 15, 2022 at 4:21 pm #1368959
    gabrimore98

    Hi!
    I would like to align the icons at the same height while having the same space from the icon to the beginning of the section, so that I can have the same alignment indipendently of the name of the tab.
    In my case I’d like to have all the icons aligned at the height of “Word shape reality” tab icon.

    Besides, I would like to had a backgound to each icon and text, maybe a circle, so that it is easier for the use to understand that those icons can be clicked.

    Thank you very much!!!

    October 16, 2022 at 10:31 am #1368999
    Nikko

    Hi gabrimore98,

    You can align them top by adding this CSS code in Enfold > General Styling > Quick CSS:

    #top .av-tab-section-tab-title-container .av-section-tab-title {
    vertical-align: top;
}

    If you want it to be inside a circle, then you can use this code instead:

    #top .av-tab-section-tab-title-container .av-section-tab-title {
    vertical-align: top;
    border: 2px solid white;
    border-radius: 50%;
    min-height: 134px;
    margin-left: 5px;
    margin-right: 5px;
}

    Best regards,
    Nikko

    October 16, 2022 at 5:18 pm #1369017
    gabrimore98

    Hi Nikko, thanks a lot for your help, but this solution created a new problem:
    Since each tab section has the same class, now the small arrow that shows which tab is active, has different height depending on which tab is open.

    I would like to have both these 2 solutions fixed and working so that I can let the client choose which is the best (even though I will propose the first one because is the preattiest one):

    1. Botton style solution: the label of the tab is wrapped in a circe and the icon + title are centered in this circle and the arrow below doesn’t change the height depending of the size of the title; In other words I would like to have 4 round buttons for the tabs, this could be a graphical solution, so that the different size of the title won’t be notied by the user

    2. Your solution: which is: “vertical-align: top;” but with the small arrow that shows which tab is open has to be ok, and not like now which.

    Thank you in advance !!!

    October 19, 2022 at 2:19 am #1369295
    Nikko

    Hi gabrimore98,

    I apologize for the delayed response.
    The problem for #1 should be fixed by adding this CSS code:

    #top .av-tab-section-tab-title-container .av-section-tab-title .av-tab-arrow-container {
    position: absolute;
    top: auto;
    bottom: 0;
}

    Best regards,
    Nikko

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