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!

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Hamburger

$9.99

Pizza

Vegetarian Pizza

$9.99

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Lasagna

$9.99

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Pastas

$9.99

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Yummy Fries

$7.99

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Chinese noodles

$9.99

Create Elementor Tabs With Horizontal Scroll For Mobile Users

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.

Create Elementor Tabs With Horizontal Scroll For Mobile Users

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.

Create Elementor Tabs With Horizontal Scroll For Mobile Users

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;
}
}

That's it! Pretty easy, huh!

When you know the code, that is...

In case you want to use the same arrow, here it is

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Et voila! Thanks for reading!

< News >

Enjoyed this tutorial? Get more awesome designs, right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Comments are closed.