Problem with tabs not scrolling down multiple lines

Resolved rolino
(@rolino)

1 year, 4 months ago

Hello,

I am using the “Advanced Tabs” widget from Essential Addons on my WordPress site and I would like the tabs to automatically move to multiple lines when there is not enough space available (for example, on smaller screens or when space is limited).

I have tried to apply a responsive layout using Flexbox, but I am having a problem: the tabs do not move to a new line when the screen width is too small. They stay aligned on a single line, and I would like them to correctly move to multiple lines if necessary.

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

Viewing 4 replies - 1 through 4 (of 4 total)

Nayeem-Ul-Islam Nipun
(@nayeem-ul-islam-nipun)

1 year, 3 months ago

Hi @rolino,
Greetings. Hope you are doing well.

Regarding your query, currently, the EA Advanced Tabs have responsive options only for mobile devices, and for mobile devices, all tab titles will show in new lines. For reference please check this screencast – https://d.pr/v/UfwHuy

EA Advanced Tabs responsive layout works on mobile devices. Hope this will help you out. Please let me know if there is anything else I can help you with.

Thanks and Regards.
Rushita Akabari
(@ruchi747)

1 year, 3 months ago
Hello @rolino,

Unfortunately, the Advanced Tabs widget from Essential Addons does not natively provide an option to automatically wrap tabs onto multiple lines when space is limited. However, you can achieve the desired result by using custom CSS.

Here’s how you can implement it:
```
/* Allow tabs to wrap onto multiple lines */
.eael-advance-tabs .eael-tabs-nav > ul {
     flex-wrap: wrap;
}

/* Set the width of each tab */
.eael-advance-tabs .eael-tabs-nav > ul li {
    width: 20%;  /* You can adjust this value as needed */
}
```
Thank you!
Nayeem-Ul-Islam Nipun
(@nayeem-ul-islam-nipun)

1 year, 3 months ago

Hi @ruchi747,
Greetings. Hope you are doing well.

Thanks a lot for your concern and sharing the custom CSS. I really appreciate this. Please feel free to reach out anytime you have issues or queries. We are always here to assist you further.

Thanks.

Thread Starter rolino
(@rolino)

1 year, 3 months ago

Many thanks, @ruchi747 , for your clear and precise answer! Thanks to your advice and the CSS tip, I was able to implement exactly what I was looking for. Your help allowed me to overcome a problem that was taking me a lot of time.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Problem with tabs not scrolling down multiple lines’ is closed to new replies.

Tags