elementor-tabs-as-tabs-mobile

Elementor – Keep Tabs as Tabs on mobile

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

There are times when one wants to have the Elementor Tabs widget to keep displaying as tabs on mobile instead of switching to an accordion. This tutorial will show you how to do so.

Note that if you want all of your tabs to behave this way, then do NOT add the CSS ID in the Advanced tab on the Tabs widget and remove the h-tabs from the provided CSS below:

@media (min-width: 320px) {
  #h-tabs .elementor-tabs-wrapper {
    display: flex;
    	flex-direction: row;
  }
}

@media (min-width: 320px) {
  #h-tabs .elementor-tab-mobile-title {
    display: none;
  }
}

 

12 thoughts on “Elementor – Keep Tabs as Tabs on mobile”

  1. Avatar

    hello
    thank you for this code,
    but in my case, my tabs’s count is 10.
    so i want to tab’s row is 2 line …
    can you help me?

    1. Avatar

      Hi Zoey,
      Not too sure how to go about that as this code was intended for just a few tabs. If I come up with something, I’ll post back here.
      Cheers!
      Lyle

      1. Avatar

        Hello, many thanks
        I also had the same problem, only able to insert 5 tabs and not 10
        If you find a solution I would love to know.
        Esther

        1. Avatar

          Hi Esther,
          You’re welcome 🙂
          Not really sure why that would be. If I come up with something, I’ll post back.
          Cheers!
          Lyle

    1. Avatar
      Sniffle Valve

      Hi Robin,
      If you copied the code from the site, then you have to add the h-tabs CSS ID in the Advanced tab of the Tab widget.
      If you have already done that and it doesn’t work, make sure you have copied the CSS correctly.
      Cheers!
      Lyle

  2. Avatar

    Perfection!!! Thank you sooo much! I couldn’t figure this out on my own. I appreciate your code on this. It’s exactly what I was looking for. This post popped up in Google search results with the phrase “tabs on mobile + elementor”

    1. Avatar

      You’re welcome, BeeBo 🙂
      Good to hear you found it easily and that it was what you were looking for.
      Cheers!
      Lyle

  3. Avatar

    Hi, thank’s for this code, I would like to show the tabs at the bottom and the content at the top… is it possible you think ?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top