Create Elementor Tabs With Horizontal Scroll For Mobile Users
Get Premium

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Element.How also offers premium tutorials! Check them here:

Create Elementor Tabs With Horizontal Scroll For Mobile Users

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.

If you would like even more features, check the Elementor Horizontal Scroll Menu, Taxonomy, Tabs With Images Premium tutorial. This is what that premium tutorial shows you:

  • PageLoad Smart: Automatically scrolls to the center of the current menu item (if one of them is the current page), current taxonomy filter, or current tab
  • Open Tab: Scroll to and open the proper tab on page load through an ID in the URL (site.com/#example-id)
  • Auto Scroll Back Up: On Tab Switch, automatically scroll back up to the top of the tabs element. Useful if your tabs titles are sticky

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.

Create Elementor Tabs With Horizontal Scroll For Mobile Users 1

Copy paste the following code in it to make the tabs horizontally scrollable.

Here is the code for the old tabs element:

<script> 
/* Please login to get the code 
 * The code will be for the Create Elementor Tabs With Horizontal Scroll For Mobile Users tutorial 
 * Found at this URL https://element.how/elementor-tabs-mobile-scroll/ 
 */ 
</script>

Here is the code for the new tabs element: (the one container based)

<script> 
/* Please login to get the code 
 * The code will be for the Create Elementor Tabs With Horizontal Scroll For Mobile Users tutorial 
 * Found at this URL https://element.how/elementor-tabs-mobile-scroll/ 
 */ 
</script>

I also added the code to make the tabs titles sticky. You can delete it if you don't need it.

If you keep it, and it's not working, see this tutorial : Debugging CSS Position:sticky not working.

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!

Create Elementor Tabs With Horizontal Scroll For Mobile Users

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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

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

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

      1. Seems to work fine for me... Did you test my demo above with your mobile phones?

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

  11. 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 🙂

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

      2. Oh how happy I was to find this comment, I have been trying to adapt the code for hours. Thank you for sharing this!!!

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

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

    1. Hey Francis!

      try this, under Advanced > custom CSS

      selector .elementor-tabs-wrapper {
      overflow: hidden;
      max-width: 100vw;
      }

      1. Fixed it without the code 🙂

        Layout/Items/Wrap selected no wrap.

        Thank you for your help.

    1. Use this code for that. Old Tabs element only.

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

}

      1. Hi, When I attached this code to the desktop part, but the title of the tag is still on the left corner, I need it to be centered like the initial setting.

        Please help me, I'm not good at coding.

        Thanks!

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

      2. Greetings!

        I updated the code, should be working now!

        Cheers!

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

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

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

  25. Thank you very much for this code! Elementor tabs should have worked like this in the first place and not like an accordion.

    I added this extra css in the style tag to hide the scrollbar on mobile cause it was still showing for me using the above code as is.

    .e-n-tabs-heading.e-n-tabs-heading::-webkit-scrollbar {
    display: none;
    }

      2. You are using the code for the old tabs element, while you have the new tabs element in there. Add the code for the new element and it should work fine!

        Cheers!

    1. Hey Tobi,

      It's not supposed to display anything. The code is to modify the Elementor Tabs element, and make the tab title horizontally scrollable on mobile.

  30. Thank you for this. One small issue is that the tabs are aligned to the left on desktop view and not the middle as I had it. Is it possible to avoid this please? I am useing the new tabs element and know zero coding. Thank you

    1. Hey Edward!

      To avoid this you can simply wrap the first part of the CSS code in between a media query for mobile only.

      @media (max-width:1024px) {

      // css here

      }

      1. Sorry to ne needy, I know nothing about CSS. Is there any chance you can please comment with the modified CSS?

      2. Wrap this part of the code:

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

        The rest stays as is! Cheers!

  32. Great code! But the line

    .e-n-tabs-content .e-n-tab-title {
    display: none; /* don't display mobile tab titles */

    are "deleting" the nested tab (a tab inside tab).
    How can I show the nested tabs again?

      1. so do you mean that it is not possible to align the tab to the center?

      2. Hello maxime desrosiers!
        Thanks a ton for helping out, the code works like a charm

    1. Hey Kahala!

      Glad you like the auto centering!

      To go back to the top of the tabs element each tab switch, add this line:

      navigationItem.closest('.e-n-tabs').scrollIntoView();

      directly below this line:

      navigationItem.addEventListener('click',function(event){

      Cheers!

  37. Great option to have thanks. it work's really well, one question, if i want to use it for a menu and always have a vertical (“accordion”) layout. I now that i can set it in additional settings in nested tabs but the limit is 1024px and down. Can i just change this code you provided? or is this a completely new custom code? I know elementor have accordion widget aswell but i think nested tabs is much better and easier to customize.

    1. Hey Rickard!

      Yea, I would just go with the native Accordion element. Soon enough they will make that one work the same as the new Tabs element does (ie able to add elements within it directly). So I'm not very much tempted to invest time working on a code snippet that will be obsolete in a few months.

      Meanwhile you can also use the old shortcode method with the accordion element. Add a shortcode to a container template into each accordion content.

      Cheers!

  38. Hello, I'm having an issue with the tabs. It started behaving weirdly and showing errors. I tried recommended solutions from the theme developer and from Elementor tech support to no avail. I used this on the website https://mykosherfish.com/ to display products categories, but it doesn't work right. Could you please check it out? Thanks, I appreciate your help.

    1. Hey Fausto!

      Sorry I'm not Elementor support and can't help everyone who has a bug with this or that Elementor feature... This becomes paid work. Hope you understand.

      Cheers!

  39. Hello,

    Thank you for sharing this code it's really helpful.
    I am trying to create nested tabs but once the code is added the nested tab (a tab inside tab) will be hidden due to the css below

    .e-n-tabs-content .e-n-tab-title {
    display: none;
    }

    i tried changing it to block but on the mobile view there are duplicate title shown..
    i cant find any selector to hide the duplicate title on the mobile..

    can you please let me know how and achieve this..

    Thanks in advance..

      1. hello,

        Thank you so much for your support, i tried adding the code given by you but it makes no changes, however if i change the display for none to block in the default css it shows all the nested tabs but in the mobile view tab titles are showing twice or duplicated please refer the screenshot attached..

        https://privatebin.net/?c84ace17dc16fbd6#5AdqBmtEgvRkMPacB5WUKZePEJRCHw1eS89W9tXEdiae

        https://privatebin.net/?470f29bdd6497ec7#C9RvEPNeMxa6S6rfLh9EhMA3VV9TairHtaQ8DfqKo7Di

        You guys are amazing thanks in advance 🙂

    1. Hey Scarlett!

      This CSS should work:

      .elementor-tabs-wrapper.elementor-tabs-wrapper {
      position: sticky;
      top: 0px;
      background-color:#fff;
      z-index:8;
      }

      However be aware that you will need some extra CSS, because you have elements with overflow-x:hidden; on your page. Position:sticky won't work. See this tutorial : Debugging Position Sticky Not Working

  42. Hi there,

    It works pretty great for me. I do have one question, i'm using the old elementor tabs and is it possible to use buttons to scroll instead of a scroll bar??

      1. I fully understand that, would be awesome if there was someone that has code for everything ready to use haha. Can you tell me what i need to look for to achieve this? Is it like styling of the scroll bar that needs to be changed or is it some extra js i have to add?

      2. Hey Marvin!

        Essentially what needs to be done is, with javascript, insert two arrows exactly where needed in the DOM (before and after the tab titles), and then add a click action that will scroll according to the arrow clicked.

        That said though, if you aren't quite familiar with JavaScript this won't be simple... You might try with chatGPT. You can also look at the code in this tutorial: https://element.how/elementor-horizontal-scroll-section/ which also has arrows scrolling a

        left and right on click.

        Or hire a dev to get it done in an hour or so.

        Cheers!

  43. hi
    thank you for the code
    it was working fine till today
    if u check this link https://candyjuicekw.com/
    its working on the pc and tab but on mobile its not shown the tabs
    i did try everything
    i read all the comments searching for a similar issue but got nothing
    thanks again

    1. thanks fixed
      i did chose the tabs settings > additional settings > break point
      "mobile portrait (>767px)"
      and it should be "none"
      thank you again for the code

  44. Hi Maxime - this was amazing and worked perfect on my tabs. I'm trying to do the same thing on my wordpress menu (not tabs) at https://cqlcorpstaging.wpengine.com/our-services/ecommerce-platforms/. I've got the scrolling to work, but it still won't make the active menu item visible on the page. Any ideas? I'm wondering if I can use your javascript but change the elements to work with the wordpress menu? (I'm not technical, so your tutorials have saved me a ton of time and work great!!)

    1. The latest Elementor update created all kind of issues, so I haven't updated yet. I have better things to do than to fix broken websites!

      I will update when it is stable, and then I will find the fix for this.

    1. ım opened new content on link .

      PHP

      Maybe it will help you improve this. I couldn't make it

      JS
      jQuery(document).ready(function($) {
      $('.tabs li').on('click', function() {
      var tabID = $(this).data('tab');
      loadTabContent(tabID); // Tıklanan tabın kimliğiyle içeriği yükle
      });

      function loadTabContent(tabID) {
      $.ajax({
      url: 'yukleme_script.php', // Tab içeriğini yüklemek için kullanılan PHP dosyanın yolu
      type: 'POST',
      data: { tab_id: tabID },
      success: function(response) {
      $('#' + tabID.replace('elementor-tab-title-', 'elementor-tab-content-')).html(response);
      }
      });
      }
      });

  50. hi maxime ım using wordpress menu element and ım try to add scroll feature. can u check it ı cant solve it

    document.addEventListener('DOMContentLoaded', function() {
    let menuItems = document.querySelectorAll('.elementor-nav-menu');

    menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
    // Tüm menü öğelerinden 'elementor-item-active' sınıfını kaldırma
    menuItems.forEach(function(item) {
    item.classList.remove('elementor-item-active');
    });

    // Tıklanan öğeye 'elementor-item-active' sınıfını ekleme
    menuItem.classList.add('elementor-item-active');

    // Tıklanan öğenin scroll işlemi
    menuItem.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
    });
    });

  51. Hello, I tried pasting the code into an HTML blog on the page, below the tabs section. Unfortunately, it seems to disappear every time. Nothing on the page changes and the HTML block is missing when I go back to remove it. I've tried 3x. SOS.

    1. Hey Micayla!

      Are you logged in as an Admin? If not, that might be the issue.

      If you are, then are you using something like WordFence? Maybe try deactivating it temporarily, and see if it works then.

      Cheers!

    1. Greetings!

      On mobile, the browsers and OS takes control of the scroll bar styling, and we can't really style it as we wish.

      There are advanced methods to force a scroll bar to show up, with our own styles, but it's complex. I will create a tutorial about this soon.

      Cheers!

  53. Hello Maxime,

    Everything works perfectly but when i have my header sticky the sticky tabs are not working.

    Do you know how to avoid that? i think it will be very helpful for everyone that need to use a sticky header.

    Thank you.

  54. Hey Maxime,
    i am trying to activate the horizontal scrolling in desktop version but its not working. In mobile and tablet works perfectly. I am using even the script to open the tab that has an ID (as an anchor link)

    This is the code that i am using.
    When i activate the Horizontal Scroll on Additional settings, the scrolling is activated but not the anchor linking. Can you please help ?

    Thank you very much,
    Julian

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

    <script>
    /* Control the Elementor Tabs from the URL
    * Code from https://element.how/elementor-open-specific-tab-toggle-accordion/
    * Copyright 2023 Element.how
    * Updated 2023/12/05
    */
    window.addEventListener('load', () => {
    setTimeout(function () {

    let scrollOffset = 100; /* scroll offset from the top of title */

    const tabsAccordionToggleTitles = document.querySelectorAll('.e-n-accordion-item-title, .e-n-tab-title, .elementor-tab-title');

    const clickTitleWithAnchor = (anchor) => {
    tabsAccordionToggleTitles.forEach(title => {
    if (title.querySelector(`#${anchor}`) != null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor)) {
    if (title.getAttribute('aria-expanded') !== 'true' && !title.classList.contains('elementor-active')) title.click();
    let timing = 0;
    let scrollTarget = title;
    if (getComputedStyle(title.closest('.elementor-element')).getPropertyValue('--n-tabs-direction') == 'row') scrollTarget = title.closest('.elementor-element');
    if (title.closest('.e-n-accordion, .elementor-accordion-item, .elementor-toggle-item')) {
    timing = 400;
    }
    setTimeout(function () {
    jQuery('html, body').animate({
    scrollTop: jQuery(scrollTarget).offset().top - scrollOffset,
    }, 'slow');
    }, timing);
    }
    });
    };

    document.addEventListener('click', (event) => {
    if (event.target.closest('a') && event.target.closest('a').href.includes('#')) {
    const anchor = extractAnchor(event.target.closest('a').href);
    if (anchor && isAnchorInTitles(anchor, tabsAccordionToggleTitles)) {
    event.preventDefault();
    clickTitleWithAnchor(anchor);
    }
    }
    });

    const currentAnchor = extractAnchor(window.location.href);
    if (currentAnchor) {
    clickTitleWithAnchor(currentAnchor);
    }

    function extractAnchor(url) {
    const match = url.match(/#([^?]+)/);
    return match ? match[1] : null;
    };

    function isAnchorInTitles(anchor, titles) {
    return Array.from(titles).some(title => {
    return title.querySelector(`#${anchor}`) !== null || title.id === anchor || (title.closest('details') && title.closest('details').id === anchor);
    });
    };

    }, 300);
    });
    </script>

    1. Hey Julian!

      I don't understand what you mean:

      When i activate the Horizontal Scroll on Additional settings, the scrolling is activated but not the anchor linking.

      Could you please share a page with both of these scenarios on it? with the Horizontal Scroll enabled, and with it disabled?

      Cheers!

      1. Hi Maxime,
        thanks for your reply.

        Here the link mmrelaunch. mein-muenchen. de/ finanzlexikon-test /#r

        First version is with the horizontal scroll disabled but anchor works perfectly.(see screenshot)
        https://ibb.co/pPbf6cL

        Second version is with horizontal scroll enabled and anchor doesn't work. (see screenshot)
        https://ibb.co/jJ7tP97

        I hope this info will be helpful.
        Thanks a lot
        Julian

    2. Greetings!

      Everything I see on this page seems to be as expected.

      I don't have anything in my code here to "click, hold and scroll". Is that what you are expecting? This is not included in this tutorial. You could try to get it from this tutorial: https://element.how/elementor-horizontal-scroll-section/

      Or you could get my premium tutorial that adds arrows to the left and right, when scrolling is available: https://element.how/elementor-horizontal-scroll-menu-taxonomy-tabs-extra-features/

      Otherwise, with the current tutorial, there is scrolling, and it works, but you need to show the scroll bar.

      To test that it's working already you hold Shift + mousewheel, that will horizontally scroll the letters.

      Cheers!

Leave a Reply