Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1319942

    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

    #1320076

    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

    #1320193

    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?

    #1320344

    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

    #1320849

    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!

    #1321026

    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

    #1321408

    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?

    #1321658

    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

    #1321716

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

    #1321888

    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 2 days, 16 hours ago by  manurimini.
    #1322103

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.