Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 7, 2021 at 8:56 am #1319942
    edukate1

    I have setup my page using tabs. The issue is that when someone is viewing a tab, they would have a hard time navigating the tabs because the other options are already off of the screen. I’m thinking the two ways to fix this are to:

    1. Make the tab section sticky when someone scrolls past it, so for example if I’m scrolling down the page and pass the tab section, it will stick to the top of my page and I can as I view the content in my tabs.

    2. Show tab section both above and below content – right now the option is only available to show tabs above or below. If this is the better option, how can I make the tab section appear both on top of the content and below the content?

    If these options are good, or if you have a better solution, please let me know. I’ve been trying to play with the code with no success Thank you!

    *Website linked in private content so you have context

    September 8, 2021 at 9:01 am #1320076
    Ismael

    Hey edukate1,

    Thank you for the inquiry

    We could set the tab title to stick to the top when scrolled, but the changes might affect the layout of other pages. If you would like to continue, try this css code in the Quick CSS field.

    .av-tab-section-tab-title-container.avia-tab-title-padding-default {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.av-tab-section-outer-container, #wrap_all, html.responsive, html.responsive body {
    overflow: visible !important;
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    September 9, 2021 at 5:52 am #1320193
    edukate1

    Thanks for your reply.

    The coding isn’t working. I tried disabling the file compression settings and it still didn’t work.

    It isn’t related to caching because I also tried adding it directly to my CSS file on inspect element.

    Any ideas?

    September 10, 2021 at 7:02 am #1320344
    Ismael

    Hi,

    Thank you for the update.

    It is working correctly on our end. Please make sure to purge the cache before checking the page. Or post the login details in the private field so that we could test it.

    Best regards,
    Ismael

    September 14, 2021 at 7:28 am #1320849
    edukate1

    Hi,

    May I ask how you are testing it on the page? I tried clearing and purging the cache and inserting it directly into the CSS through inspecting the element. The only thing that happens when I insert the code is that the arrows disappear for the tabs (so I know the code is having some impact but not the desired impact).

    Any chance you could check out why that might be on my page? I can provide temp access but since its a production site I’d rather do the testing via inspect element and adding the CSS into my child CSS field from there if possible.

    Thank you!

    September 15, 2021 at 12:11 pm #1321026
    Ismael

    Hi,

    My bad. There is a missing selector in the previous css code. We adjusted it a bit.

    .av-tab-section-outer-container, #wrap_all, html.responsive, html.responsive body, #main, .av-tab-section-container {
    overflow: visible !important;
}

.av-tab-section-tab-title-container.avia-tab-title-padding-default {
    position: sticky;
    top: 0;
    z-index: 1000;
}

    Result after adding the css code via browser inspector.

    // https://postimg.cc/ykDY8Kv7

    Best regards,
    Ismael

    September 17, 2021 at 8:26 pm #1321408
    edukate1

    Thank you! This is exactly what I wanted. The only issue is that on mobile, it stretches the tab bar and removes the arrows. I attached a video so you can see what I mean.

    Any ideas on how to prevent that from happening?

    September 20, 2021 at 4:29 pm #1321658
    Yigit

    Hi,

    Please try changing the code to following one to it only applies on screens larger than 990px

    @media only screen and (min-width: 990px) {
.av-tab-section-outer-container, #wrap_all, html.responsive, html.responsive body, #main, .av-tab-section-container {
    overflow: visible !important;
}

.av-tab-section-tab-title-container.avia-tab-title-padding-default {
    position: sticky;
    top: 0;
    z-index: 1000;
}
}

    Best regards,
    Yigit

    September 21, 2021 at 6:40 am #1321716
    edukate1

    Thank you, this will work for the desktop view. Is there a way to make it work for mobile also?

    September 22, 2021 at 12:07 pm #1321888
    manurimini

    Hello
    The code works, but if you have long content the new tab doesn’t load on the top so that you have to scroll to see the tab from its beginning.
    Is there a way to make the new tab enter on top so that you can read the content from the beginning without scrolling to the top?
    Best Regards
    Manu

    • This reply was modified 3 years, 3 months ago by manurimini.
    September 24, 2021 at 5:48 am #1322103
    Ismael

    Hi!

    Thank you for the update.

    You can add another button or link below the tab section which anchors to an element above the tab section, so that the user can go back immediately to the top without scrolling back up. An element with an anchor looks like this.

    <div id="tab-section-top"></div>

    You can also use the name attribute. You can then create a button that links to the anchor element.

    <a href="#tab-section-top">Go back to the top of the tab section</a>

    You can also use the button element in the builder.

    Best regards,
    Ismael

    September 27, 2021 at 7:45 am #1322413
    edukate1

    Hello,

    This does not work inside of tabs. I have it set up outside of tabs, but in the tab section, clicking the button doesn’t do anything. You can see this by trying:

    1. You will see the second tab is “#click-to-see-meeting-points”
    2. Try entering the code into the tab section:
    <a href="#click-to-see-meeting-points">Click here to see the next tab</a>
    3. Clicking on it will not change the tab you are on

    Is this a bug? If this can work it would solve my original question without the sticky tabs.

    Thanks

    September 30, 2021 at 1:50 am #1322885
    Ismael

    Hi,

    Did you create a new element above the tab section with the id or the name “click-to-see-meeting-points”? The anchor link is not supposed to change or open a tab, it will just move the document above the tab section. Unfortunately, you cannot open a tab using an anchor link.

    Best regards,
    Ismael

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