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

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;
	}
	
	.elementor-tab-desktop-title.elementor-active:before, .elementor-tab-desktop-title.elementor-active:after{
    width:0px!important;
}
}

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

12 Responses

  4. 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)

    1. 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?

  6. 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.

Leave a Reply