Table of Contents
In this tutorial, I will show you how to add horizontal scroll to the Elementor Tabs titles. Works great on mobile, and works for desktop as well if you need it there too!
Facebook apps uses this, Uber Eats, YouTube, why not you? Elementor tabs mobile scrollable title!
Here is what we will create. Note that on an actual mobile, that thick scroll bar won't show up.
You can also visit this url from your mobile for a better preview.
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 works with both the old tab element, and the new one that allows adding element directly within its content.
Then, add an HTML element on your page, and add this code in it
The HTML element can be anywhere on the page.
Copy paste the following code in it to make the tabs horizontally scrollable.
Here is the code for the old tabs element:
<style>
.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;
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;
}
}
</style>
<script>
/* Code from https://element.how/elementor-tabs-mobile-scroll/
* Version 1.0
* Copyright 2022 Maxime Desrosiers
*/
document.addEventListener('DOMContentLoaded',function(){
let scrollableNavigations = document.querySelectorAll('.e-n-tabs-heading');
scrollableNavigations.forEach((scrollableNavigation, index) => {
let navigationItems = scrollableNavigation.querySelectorAll('.e-n-tab-title');
scrollableNavigation.style.scrollBehavior = "smooth";
navigationItems.forEach((navigationItem,i) => {
let scrollToPosition = (navigationItem.getBoundingClientRect().left + navigationItem.offsetWidth/2) - (window.innerWidth/2);
navigationItem.addEventListener('click',function(event){
scrollableNavigation.scrollTo(scrollToPosition, 0);
});
});
});
});
</script>
Here is the code for the new tabs element:
<style>
.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading.e-n-tabs-heading {
overflow-x: auto; /* enable horizontal scrolling */
display: flex;
flex-wrap: nowrap;
justify-content: start;
padding-bottom: 10px;
}
.e-n-tabs-heading > .e-n-tab-title{
white-space: nowrap; /* optional, prevent tabs title from breaking into 2 lines */
}
.e-n-tabs-content .e-n-tab-title {
display: none; /* don't display mobile tab titles */
}
/* Desktop scroll bar styling, if you want the horizontal scroll on desktop as well */
@media (min-width:1025px){
.e-n-tabs-heading::-webkit-scrollbar-track {
background-color: #dedede;
}
.e-n-tabs-heading::-webkit-scrollbar {
height: 8px;
}
.e-n-tabs-heading::-webkit-scrollbar-thumb {
background-color: #aeaeae;
}
}
</style>
<script>
/* Code from https://element.how/elementor-tabs-mobile-scroll/
* Version 1.0
* Copyright 2022 Maxime Desrosiers
*/
document.addEventListener('DOMContentLoaded',function(){
let scrollableNavigations = document.querySelectorAll('.e-n-tabs-heading');
scrollableNavigations.forEach((scrollableNavigation, index) => {
let navigationItems = scrollableNavigation.querySelectorAll('.e-n-tab-title');
scrollableNavigation.style.scrollBehavior = "smooth";
navigationItems.forEach((navigationItem,i) => {
let scrollToPosition = (navigationItem.getBoundingClientRect().left + navigationItem.offsetWidth/2) - (window.innerWidth/2);
navigationItem.addEventListener('click',function(event){
scrollableNavigation.scrollTo(scrollToPosition, 0);
});
});
});
});
</script>
Finally, enjoy your new auto centering, horizontally scrollable tabs element!
That's right, the code also includes JavaScript that will automatically center the active tab!
Cheers!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
56 Responses
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:
.elementor .elementor-element .jet-tabs__control-wrapper { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; margin-right: -10px; justify-content:start!important; } .elementor .elementor-element .jet-tabs__control-wrapper::-webkit-scrollbar { height: 0; } .elementor .elementor-element .jet-tabs__control-wrapper > div { min-width:140px; /* adjust to fit your needs */ } .jet-tabs.jet-tabs-position-top { display:block; }it worked perfectly. Thanks a lot :))
Oh how happy I was to find this comment, I have been trying to adapt the code for hours. Thank you for sharing this!!!
Welcome Elena! Glad you found what you were looking for!
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.
How can I disable it at desktop and use it only on mobile ?
Use this code for that:
@media (max-width:1024px){ .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; } }Awesome. Can you make the title tabs automatically in center if i click it on mobile?
Hello, does it work with widgets inside a section?
Greetings!
Not as it is no. Similar CSS will work for elements, but not exactly the same...
Try:
selector {
max-width:100vw;
overflow-x:auto;
}
I love this so much, helps me a lot!
It would be great if you could update the code for new (nested) tabs
Greetings Jackimov,
I added the code for these in the tutorial!
Cheers!
I don't know why this isn't working.
Greetings!
I updated the code, should be working now!
Cheers!
Hello! How to center the active tab when swiping?
Example video: https://share.icloud.com/photos/00esMRGhfpqDm5M58qpZdn1Yw
Greetings Doro!
I added instructions for this in the tutorial!
Is there a limit to how many tabs can be used? I have 14 tabs and oddly 7 are visible in mobile portrait view and 9 are visible in mobile landscape view. I am using latest version of Elementor Pro with containers. Please advise. Thank you.
Forget my question. Looks like I had to set the tabs to full justify. That seems to display them all.
Thanks for sharing the solution!
This code doesn't work if you nest two tabs into one another. Can you provide a code for that situation?
Hey Jeffrey!
What version of the code are you using? What result would you expect that you don't have (ie, what does "doesn't work" mean?)
Thanks!
It's the updated code. If you nest 2 tab elements, the 2nd tab instance doesn't display. The fields show up, but the tabs are not displaying and don't function.