How to Create Tabs With Horizontal Scroll For Mobile Users
Facebook apps uses this, Uber Eats, why not you? Elementor tabs mobile scroll-able title!
Hamburger
Pizza
Lasagna
Pastas
French Fries
Chinese Foods
Hamburgers
Hamburger
Hamburger
$9.99
Pizza
Vegetarian Pizza
$9.99
Lasagna
Lasagna
$9.99
Pastas
Pastas
$9.99
French Fries
Yummy Fries
$7.99
Chinese Foods
Chinese noodles
$9.99
Hamburgers
Hamburgers
$19.99
To begin with, create your tabs Element the way you want it. Here, we are using the one that comes by default with Elementor.
This tutorial will only work with that element. If you are using another tabs Element from an addon, it is still possible but will require modifications.
If you want something more complex, simply import template shortcode into the tabs content
If you have Elementor Free, you can use Anywhere Elementor to make this possible also.
Finally, simply use this CSS to make it scroll-able horizontally!
See the end of this article to know where to add the CSS, if you don’t already.
.elementor-tab-title.elementor-tab-mobile-title { display: none; } .elementor-tab-title:nth-child(odd) { background-color: teal; } .elementor-tab-title:nth-child(even) { background-color: crimson; } .elementor .elementor-element .elementor-tabs-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; margin-right: -10px; } .elementor-tabs-wrapper::-webkit-scrollbar { height: 0; } .elementor-tab-title { flex: 0 0 auto; } .elementor-tab-desktop-title.elementor-active:before, .elementor-tab-desktop-title.elementor-active:after { width: 0!important; } /* Desktop scroll bar styling */ @media (min-width:1025px){ .elementor-tabs-wrapper::-webkit-scrollbar-track { background-color: #b6b6b6; } .elementor-tabs-wrapper::-webkit-scrollbar { height: 8px; background-color: #F4f4f4; } .elementor-tabs-wrapper::-webkit-scrollbar-thumb { background-color: #0000008f; } }
Use the code below instead of the code above, for Essential addons tabs. Adjust the ‘min-width’ to fit your needs.
@media (max-width: 767px) { .eael-advance-tabs .eael-tabs-nav>ul { flex-flow: row nowrap; overflow-x:scroll; } .eael-advance-tabs .eael-tabs-nav>ul li{ min-width:150px; } }
That's it! Pretty easy, huh!
When you know the code, that is…
Et voila! Thanks for reading!
Tagged More Awesome Designs
That's brilliant, thanks
Welcome!
You are my hero. Thank you!
Thanks!
Do you have the code for this with ElementorsKit tab?
No I don't.... Send me the URL I might be able to get it for you
Hello, thanks for the code. Is this supposed to allow us to scroll horizontally by finger swipe on mobile? if so, i can't seem to get it to work on my mobile phone (iphone 7plus)
my bad, it actually works. didn't know it was just for the title in the tabs. is there any way i can make this work with the contents in the tabs?
Cool,Thank you
Thanks!
Thats pretty cool. But it seems like its not working if the page is a User restricted Area.
If i create a new "page" it works fine. On my template sections in the user area it is not working.
I have no idea why that might be...
Hi Maxime,
LOVE this tab swipe function but I am having a little trouble with it.
On one site is working perfectly and then on another, the swipe function is jittery and unresponsive.
Have you encountered this before?
PS - It works fine on computer in browser Dev (responsive) mode but not on my mobile. And also checked a few browsers on my mobile to rule out browser problem. Also checked on another mobile and same issue.
Seems to work fine for me... Did you test my demo above with your mobile phones?
Nope can't say I have... It might be some conflict with something on your other site.
Hi! I need to be able to scroll on desktop too, since there's too many tabs for the viewport. Is there a way to use this with a scrollbar or something like that?
Her Mercedes! I updated the code in the tutorial, now it works for desktop automatically as well!
Thank you very much for your work! Please tell me how to do this with Nav menu (elementor) ?
Can anyone suggest a solution to this problem?
This works: https://element.how/elementor-horizontal-scroll-section/
for mobile version
Thank you very much for these great tutorials,
Can you provide the code for Crocoblock JetTabs?
I tried to make it myself, but I couldnt 🙂
Here it is:
it worked perfectly. Thanks a lot :))
Thank you very much for your code.
But, I have problem with tablet viewport @media (max-width: 1024px). The scroll tabs limited slide from left tabs, so some of tabs title are not visible.
May I know how to fix that?
I updated the code in the tutorial, now it should work for that scenario just fine!
Hi,
How to do it with desktop view?
UX UI isn't great on desktop if you add this. There will be an ugly scroll bar... This is really more for Mobile users.
I have been using this code for a while, but it does not work correctly on mobile if I use containers as there is an overflow and the content does not warp on mobile.
https://www.celmetro.com/home-test-page/
Appreciate if you can look into this.
BR
Hey Francis!
try this, under Advanced > custom CSS
selector .elementor-tabs-wrapper {
overflow: hidden;
max-width: 100vw;
}
Fixed it without the code 🙂
Layout/Items/Wrap selected no wrap.
Thank you for your help.
Thank you Maxime, the tab layout is fine now but the horizontal scroll does not work 🙂
Disregard the above comment 🙂
Awesome. Can you make the title tabs automatically slide/ swipe to right?
Yes that would be possible with extra code.