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
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;
}
@media (max-width: 767px) {
.elementor-tabs-wrapper {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
}
.elementor-tabs-wrapper::-webkit-scrollbar {
display: none;
}
.elementor-tab-title {
flex: 0 0 auto;
}
.elementor-tab-desktop-title.elementor-active:before, .elementor-tab-desktop-title.elementor-active:after{
width:0px!important;
}
}
That's it! Pretty easy, huh!
When you know the code, that is...
