Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 21, 2023 at 9:38 am #1419845
    woogie07

    Hi,

    I am using the tab section.

    My concern is that its not obvious that browsers have to click on the tab headers to rotate to the section.

    I could add a line above to make it clearer but this may get lost.

    Is there an auto rotation on this element that slides copy and content across or an alternative element?

    Thanks

    September 22, 2023 at 4:14 am #1419972
    Nikko

    Hi woogie07,

    There’s no auto rotation for it.
    Maybe make the tab headers look like a button would help?

    Best regards,
    Nikko

    September 22, 2023 at 9:57 am #1420007
    woogie07

    How would you style the button?
    Maybe add an arrow icon above each tab header?

    September 23, 2023 at 3:07 pm #1420115
    Nikko

    Hi woogie07,

    How would you style the button?
    You can add this CSS code:

    #top .av-section-tab-title {
    padding: 10px 10px 0;
}

#top .av-section-tab-title .av-outer-tab-title {
    background-color: #FFFFFF;
    border: 1px solid rgb(209,213,219);
    border-radius: 0.5rem;
    box-sizing: border-box;
    color: #111827;
    line-height: 1.25rem;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
}


#top .av-section-tab-title .av-outer-tab-title .av-inner-tab-title {
    margin: 0;
}

#top .av-inner-tab-title, 
#top .av-tab-section-icon, 
#top .av-tab-arrow-container, 
#top .av-tab-section-image {
    width: 100%;
}

    Maybe add an arrow icon above each tab header?
    It’s possible, you can use this CSS code:

    #top .av-outer-tab-title:before {
    content: '\e88b';
    display: block;
    font-family: 'entypo-fontello';
    font-size: 18px;
}

    Best regards,
    Nikko

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