Assistance with Advanced Tabs Widget Layout on Mobile

  • Resolved stanhillalsim3

    (@stanhillalsim3)


    10 months, 3 weeks ago

    Hello,

    I am currently utilizing the Advanced Tabs widget from Essential Addons on my WordPress site and am seeking some guidance on improving the mobile user experience.

    Issue Description:

    • On mobile view, all tabs are displayed at the top of the content area. For example, if I have 5 tabs, they are all aligned horizontally at the top.
    • When a user opens the first tab and scrolls through its content to the bottom, they need to scroll all the way back up to select and view the next tab.

    Desired Outcome:

    • I’m looking for a way to keep each tab’s title visible or pinned at the top as users scroll through the content of each tab. This would allow for easier navigation between tabs without needing to scroll back up to the top each time.
    • Essentially, I want users to be able to switch between different tabs without losing their place or having to navigate back to the tab titles.

    Example for Reference:

    Request:

    • Is there any custom CSS or JavaScript that I can implement to make the tabs remain accessible as the user scrolls through the content on a mobile device?
    • Any tips or code snippets that could help achieve this sticky tab title functionality would be greatly appreciated.

    Thank you for your time and assistance. I am looking forward to a solution that could enhance the mobile viewing experience for these tabs.

    Best regards

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter stanhillalsim3

    (@stanhillalsim3)

    • Ideally, I would like the tabs to act more like an accordion specifically for mobile users. This means when one tab is opened, it should expand its content directly underneath, while the other tabs remain easily accessible for selection without the user needing to scroll back up.
    • This accordion-like behavior would allow users to smoothly transition between different tabs’ content, enhancing the overall mobile navigation experience.
    Plugin Support Amin

    (@amin7)

    Hi

    I hope you are fine today.

    Please use the following CSS.

    @media only screen and (max-width: 767px) {

    .eael-advance-tabs .eael-tabs-nav { overflow: scroll hidden; position: sticky; top: 90px; }

    .eael-advance-tabs .eael-tabs-nav > ul { flex-flow: row nowrap !important; }

    .eael-advance-tabs .eael-tabs-nav > ul li .eael-tab-title { width: max-content;

    } }

    It will look like this, https://d.pr/v/0XzHeu I hope it will fulfill your requirements.

    Thanks

    Plugin Support Amin

    (@amin7)

    Hi stanhillalsim3

    I hope you are fine today.

    We did not hear from you since our last reply. We assume this issue resolved with our provided solution. We are resolving the topic.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Assistance with Advanced Tabs Widget Layout on Mobile’ is closed to new replies.