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;
}
}
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?
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
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
Hi Esther,
You’re welcome 🙂
Not really sure why that would be. If I come up with something, I’ll post back.
Cheers!
Lyle
Sir nothing is happening. I tried as per your video but nothing is happening.
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
worked. thanks!
Hi Mark,
You’re welcome! Good to hear that it worked!
Cheers!
Lyle
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”
You’re welcome, BeeBo 🙂
Good to hear you found it easily and that it was what you were looking for.
Cheers!
Lyle
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 ?
Hi Kevin,
Not sure how one would go about doing that.
Cheers!
Lyle
Hi
is it possible to do that for Vertical tabs as well, if yes then plz share the css code for that.
thanks in advance
Not sure. Will take a look and post back if I come up with something.
Cheers!
Lyle
Thank you sir.
You’re welcome, Junior 🙂
Cheers!
Lyle
Hi Sniffle,
Great vid and thanks for sharing! 🙂
Quick question though…does this css only work with the elementor tabs widget? I tried applying it to the one from the free “Essential Addons” plugin (The specific widget is: EA Advanced Tabs), but it doesn’t seem to be working…
Any thoughts?
Thanks a lot Sniffle!
Hi Bob,
Yes, this CSS works only for the Elementor tabs. The EA one would have different selectors.
Cheers!
Lyle
Hi Sniffle ! Thanks for your css.
However, i still have a issue. When it goes to responsive mobile if the tabs are not exactly the same length due to different titles it can generate unwanted gap.
How would be possible to force all tab to same length ? what ever the title length
Cheers
Hi Emeric,
You’re welcome 🙂
Not to sure on how to go about doing that. I’ll do some testing and post back when I find something that works.
Cheers!
Lyle
Thank you my friend!
You’re welcome Matheus 🙂
Cheers!
Lyle
I have managed to make tabs break line on all screens, for people having this issue when there are many tabs this is my code I’m using:
(I have disable borders for tabs so it looks better)
#h-tabs .elementor .elementor-element .elementor-tab-title {
display: inline-block;
}
#h-tabs .elementor-tabs-wrapper {
display: block;
text-align: center;
}
#h-tabs .elementor-tab-mobile-title {
display: none;
}
@media (max-width: 767px) {
.elementor .elementor-element .elementor-tab-title {
padding: 15px 5px;
}
}
Thanks for the code! 🙂
Cheers!
Lyle
Thanks for the code!
Hi Tariq,
You’re welcome 🙂
Cheers!
Lyle
Hey there,
I did everything just like the video,
but when i switch to the mobile, the tabs totally disappear!
here is the link, would you please help me?
https://betasahm1.ir/mobile/
many thanks!
Hi Sadra,
Not sue what to say as I cannot make out what it is supposed to look like. I would suggest posting this to the Elementor Facebook group where others who are familiar with the language will be better suited to assist.
Cheers!
Lyle
Hello Lyle,
Thank You for this video. You saved me a ton of time having to hunt around Elementor to find how to do this.
Just getting into making layout changes for mobile view and this tab tutorial did exactly what I wanted.
Going to definitely have a look at you other Elementor videos.
You’re very welcome 🙂
Glad to hear that it was what you needed and thanks for checking out the other videos.
Cheers!
Lyle
Hi,
Love the video, thank you soo much.
Do you know how I’m able to make the tabs centre when in mobile as its moved to the left hand side ?
You’re welcome 🙂
Not sure how to centre on mobile; probably some CSS.
Cheers!
Lyle