Elementor has corrected this issue and can now be achieved without CSS by editing the tab > under content > additional settings > set breakpoint to none. Thank you for the work around however up until now.
Yesterday, I had this problem and searched everywhere, but couldn't find any solution. However, I am happy to say that I finally found the solution! Thank you so much😊😊
For exactly this type of content I absolutely love this channel! You do not waste our time. Other youtubers would have made a 12min video out of this! Anf yes, the first time I used the nested tabs on mobile I was shocked. How Elementor can‘t see that theier implementation is not clever? Thanks for a solution!
Great video thanks, very helpful. For me it was enough to just use this code. It simulates how the tabs look on desktop, specifically for 2 tabs: @media (max-width: 767px) { .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading { display: flex; --n-tabs-title-gap: 2%; } .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading .e-n-tab-title { max-width: 49%; width: 100%; flex-basis: auto; margin: 0px !important; padding: 15px 0px; } }
i dont understand how they release this feature and they dont even think about the mobile version. whats the point of having tabs if you have to scroll down to select the next tabs?? its uselsss. Thanks for the fix.
How to make none of the tabs showing its content when page is loaded? Like the old toggles / accordions? Only when the user is clicking on a tab, the content folding out?
Hi All - There is now settings in Elementor that make this redundant - but it wasn't updating automatically for me. If you're in the same boat... you can click a button to have horizontal tabs at any size (remove the mobile breakpoint) AND have better tab styling. Love Web Squadron but was pulling my hair out trying to figure out how to do this within Elementor. You may have to UPDATE your settings in Elementor. Update Elementor/settings/Features. On that screen, if not already on, turn on Nested Elements and Flexbox Container. Reload your page, add new tabs widget. Then look for "additional Options" in the content screen. Should be under the Tabs container content. :D
Чтобы кнопки оставались вверху, а контент внизу, достаточно просто в мобильной версии в Edit Tabs зайти в Content и в разделе Addicional Setting в Breakpoint поставить none. Все будет работать
Thanks as always for the great tutorial! Is there any way of adding a function for the mobile version so the user jumps to the content of the clicked tab?
Love this, love the channel too. Had this exact problem and used the code to fix, perfect. As I was doing it I realised that the mega menu element works in a very similar way (not exactly, but close). Then unfortunately I noticed that this code seems to be creating a conflict with the mega menu on my mobile site where the first 'tab' of the mega menu nav doesn't show.
Does this CSS still work for the older tabs? I tried re-creating my tabs in the Flexbox containers, but they don't look like tabs any more, so I prefer the earlier one. I pasted in the code, but it didn't look different on mobile. I don't know much about CSS though, so it's likely to be user error.
Great stuff!! Just 1 question. Do you know how to force the tabs to wrap in desktop mode? Lets say you have 5-6 tabs, all of them with long headings and you want to keep the size of the tabs so they dont shrink. Thank you!
HI! TNAKS SO MUCH! I use the code without problem BUT! I only had to tabs and one title (THE FIRST ONE) is bigger than the second title or second tab.. do u know hoy can I fix this???
This doesn't seem to work anymore and like recent comments below - I can't find the "solution" pinned to the top. Where would additional settings to set a breakpoint exist or was that removed in an update in the last 4 months? Thanks!
Thank you. It wasn't visible/active for me (or a lot of folks). I found the settings that enable it going forward. Added as a comment above. :) Hopefully it helps others who are searching. Have an amazing day!! @@websquadron
BRILLIANT!!! Is there a way to make the tabs become a drop down selection box when it goes into mobile view??? That would be the ULTIMATE!!! 🔥🔥 Great content - new subscriber! 😊
This isn't working for me, and I don't know why. Also, the stickied comment about "set breakpoint to none" doesn't work for me either because I don't see that option under any of the settings. Please help!
I have a question but I can't find a code to solve the problem, I tried to create it and it didn't work either. Is it possible to set another tab button to ''true'', making a different tab open when the website loads?
Great solution! Do you know if it is also possible to open the second tab with a link e.g. #tab2? There is only one CSS ID, but when I set the ID then it doesn't work. Thanks for your help and by the way great content!
Great code! But at my site, doesnt fully worked. I have nested tab (a tab inside a tab) and, after put the code, the "parent" tab has gone Could you help me with this?
3.14.1 Pro here, but I don't see any relevant option. And the provided code doesn't work on my site unfortunately. Am I missing something? Anyone has an update on this issue? EDIT: I found another code that worked, but if there is a built-in option I am not seeing, I would appreciate it if someone pointed me to it. Thank you.
@@websquadron Thank you my friend for the reply. But I am not seing anything different in the (new) "Tabs" behaviour. I had to copy, manipulate and generate enough code to achieve the desired outcome. However, I am also facing another issue, which I will shortly explain, but if you think this is not the proper place ot do it, I understand. So, my other issue is the following: I have a Ninja Table which is placed within a tab (as a dynamic shortcode)... but just below the table I also have what looks like the table code. I am trying to make it dissapear with no luck so far. In short.. I have a Ninja Table in a tab + its code showing underneath... EDIT: I just noticed that a lot of things are not right with the table (buttons not displaying, text not justifying properly etc), so maybe part of the table code that is not rendering is being spit out underneath, or something... idk Does any of this sound familiar to you? UPDATE: There is something wrong with the elementor dynamic shortcode. I placed the shortcode directly in the text area and it's rendering properly. (And now that I think about it, I am pretty sure I had this kind of issues with elementor shortcodes in general before..)
@@websquadron That's the issue . I was asking if you know of a way to have another tab open by default on load...For info I didn't find any option for that and ended up using some JS to simulate a click on the tab I wish openned at start. Thanks
Hi @websquadron, I noticed today that none of my tabs appear anymore on mobile, it's been working fine for a few months but I'm not sure at what point it changed. Was wondering if you, or anyone else has had the same issue recently?
@UCGluwQk6s9QXVQozEDdW%F0%9F%99%8F%F0%9F%99%8FCcQ hey, I wrote these code, It shows both tabs in the colum and row also, how could i remove the row. please tell me. selector .e-n-tabs { flex-direction: row; } @media (max-width: 768px) { selector .e-n-tabs { flex-direction: column; } selector .e-n-tabs-heading { display: flex; justify-content: space-between; } selector .e-n-tab-title { width:50%; text-align: center; } }
Lol exactly what I did for a client last week because they didn't like that on mobile after tapping a tab title it would jump to content randomly and not start at the top. Very bad UX
Brilliant as always!! but after applying this i have this error "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions." Failing Elements: div.elementor-element > div.elementor-widget-container > div.e-n-tabs > div.e-n-tabs-content
You would have to have really tiny title on the tabs for them not to get a bit squashed in this way. Isn't it better to make the buttons full width with something like this: .e-n-tab-title { flex-shrink: 0; max-width: 100%; flex-basis: auto; }
Elementor has corrected this issue and can now be achieved without CSS by editing the tab > under content > additional settings > set breakpoint to none. Thank you for the work around however up until now.
Absolutely true :)
This needs to be pinned to the top!
yees!!
where can I find this option can you help me please I can't find this option bro
Yeah, I'm with @TheActiveSolutionsPvt. I don't have additional settings in my tab editor. What version of Elementor are you running?
Yesterday, I had this problem and searched everywhere, but couldn't find any solution. However, I am happy to say that I finally found the solution! Thank you so much😊😊
Excellent!
For exactly this type of content I absolutely love this channel! You do not waste our time. Other youtubers would have made a 12min video out of this! Anf yes, the first time I used the nested tabs on mobile I was shocked. How Elementor can‘t see that theier implementation is not clever? Thanks for a solution!
Youre the man. I Always know where to find solution for my problems
you are the best! you always help find the answer to the most narrowly focused questions that cannot be answered anywhere else
Life Saver!!! Ok, not literally, but oh my gosh you've saved me so much time and effort. Thanks Imran and William
I just posted this exact same concern last week on the video they released about the new tabs! Glad to see someone got a fix!!! Thank you!!!
me too.
Glad I could help!
Great video thanks, very helpful. For me it was enough to just use this code. It simulates how the tabs look on desktop, specifically for 2 tabs:
@media (max-width: 767px) {
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: flex;
--n-tabs-title-gap: 2%;
}
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading .e-n-tab-title {
max-width: 49%;
width: 100%;
flex-basis: auto;
margin: 0px !important;
padding: 15px 0px;
}
}
Thanks Imran! This CSS snippet was just what I needed
I keep going back to your videos. Everything is so helpful, thank you thank you!
Thank you for making these tutorials and also keeping them short and in to point
i dont understand how they release this feature and they dont even think about the mobile version. whats the point of having tabs if you have to scroll down to select the next tabs?? its uselsss. Thanks for the fix.
Thanks. Amazing that Elementor did not solved this problem. Mobile first, guys !
PERFECT!! You saved me hella stress over this with just a CSS code! Thank You SO Much!!
I really needed this!
Thank you so much!!
I'm from Brazil!
You are a god among insects... thanks master!!!!
Fantastic, this code snippet works really well. Thanks!
How to make none of the tabs showing its content when page is loaded? Like the old toggles / accordions? Only when the user is clicking on a tab, the content folding out?
See this: th-cam.com/video/7EdpqoO87xE/w-d-xo.html
Hi All - There is now settings in Elementor that make this redundant - but it wasn't updating automatically for me.
If you're in the same boat... you can click a button to have horizontal tabs at any size (remove the mobile breakpoint) AND have better tab styling. Love Web Squadron but was pulling my hair out trying to figure out how to do this within Elementor.
You may have to UPDATE your settings in Elementor.
Update Elementor/settings/Features. On that screen, if not already on, turn on Nested Elements and Flexbox Container.
Reload your page, add new tabs widget. Then look for "additional Options" in the content screen. Should be under the Tabs container content. :D
Yup the new widget is the way to go
Чтобы кнопки оставались вверху, а контент внизу, достаточно просто в мобильной версии в Edit Tabs зайти в Content и в разделе Addicional Setting в Breakpoint поставить none. Все будет работать
Yup this video came out before the update to the tabs
You're amazing. Worked perfectly
Thanks as always for the great tutorial! Is there any way of adding a function for the mobile version so the user jumps to the content of the clicked tab?
Not got a solution for that yet
Truly good content!
I am using shortcode in tabs, when I add shortcode, all the content in other tabs displays in tab 1. Followed by tab 2 includes contents of tab 3.
Thanks once again! You are all great!
actually it stuffed up my site so I had to remove the code. there were some warning signs as well
You don't need to use this now as the new Nested Tabs handled it.
: ) of course! it must have just been in the newest update ...... Have a lovely day
@@websquadron
Love this, love the channel too. Had this exact problem and used the code to fix, perfect. As I was doing it I realised that the mega menu element works in a very similar way (not exactly, but close). Then unfortunately I noticed that this code seems to be creating a conflict with the mega menu on my mobile site where the first 'tab' of the mega menu nav doesn't show.
Don't worry, the new Elementor 3.14 Update due in the next week or two will sort out the Top Tabs without the need to use any codes.
@@websquadron Thanks Imran. Appreciate the heads up, Nick.
Hey WebSalve, did you manage to fix the conflict with the mega menu? On mobile mega menu hides the first tab as you said, can't find a solution yet.
@@HectorVector85 Not yet I'm afraid, I haven't really been focusing on it though. If I find anything I'll post a soloution here.
Awesome :-) Thank you both for that.
Super as always!
thanks,u are a life saver!!!!!
Amazing! Thank you so much, bro!
When I set the tab sticky top, the content (Loop Grid) can't scroll down, that's the bug?
Tell me that If I wanted to make carousel of tabs name in responsiveness how can I do that?
In the name of my freaking mother, you are the best for sure.
Here's how to do it from free and easily: Tabs>Content>Advanced Settings>Breakpoint=None
Additionally, turn on "Horizontal Scroll"
Yup. They introduced after this video was created.
It worked! my only issue is my first tab is a bit higher than the others any idea why?
Hmmmm... Have you tried the new improved nested tab from Elementor that now enables the Mobile tabs?
yes i followed the tutorial with the new features its very strange and only on mobile like 5 pixels above the other tabs.@@websquadron
I have the same problem as you
Can this be adapted so it works on that qi addons horizontal tab widget that has the underlining animation?🤔
Best to check with their Developers.
Thank you for this video and code.
Does this CSS still work for the older tabs? I tried re-creating my tabs in the Flexbox containers, but they don't look like tabs any more, so I prefer the earlier one. I pasted in the code, but it didn't look different on mobile. I don't know much about CSS though, so it's likely to be user error.
Difficult to be sure where the problem may be. This code does still work for the older tabs.
Thank you for this! 👏
Would love to do this but am working on the free version of elementor. Do you have a work around for that? Thank you!
Not without Pro.
Can I do that with non-container website? I am using non-container so It doesn't work
Great stuff!! Just 1 question. Do you know how to force the tabs to wrap in desktop mode? Lets say you have 5-6 tabs, all of them with long headings and you want to keep the size of the tabs so they dont shrink. Thank you!
Maybe if you changed the padding to make them sit on separate lines.
Thanks a lot Imran
My pleasure
HI! TNAKS SO MUCH! I use the code without problem BUT! I only had to tabs and one title (THE FIRST ONE) is bigger than the second title or second tab.. do u know hoy can I fix this???
Difficult to assess without seeing it.
Thank you very much.
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: flex;
flex-wrap: wrap !important;
flex-direction: column; //put tabs on multiple lines
align-items: center; //center tabs
}
Thanks a lot!!!
It's helpful, thanks!
is there code to keep all tabs closed at the start as opposed to having the first one open automatically?
Yup: th-cam.com/video/7EdpqoO87xE/w-d-xo.htmlfeature=shared
This doesn't seem to work anymore and like recent comments below - I can't find the "solution" pinned to the top. Where would additional settings to set a breakpoint exist or was that removed in an update in the last 4 months? Thanks!
The Elementor update a while ago removed the need to do this. Now the tabs can be set to flow horizontally on the mobile
Thank you. It wasn't visible/active for me (or a lot of folks). I found the settings that enable it going forward. Added as a comment above. :) Hopefully it helps others who are searching. Have an amazing day!! @@websquadron
BRILLIANT!!! Is there a way to make the tabs become a drop down selection box when it goes into mobile view??? That would be the ULTIMATE!!! 🔥🔥
Great content - new subscriber! 😊
That would need some funky JS
This isn't working for me, and I don't know why. Also, the stickied comment about "set breakpoint to none" doesn't work for me either because I don't see that option under any of the settings. Please help!
I would need to assess, but I on't do that via 1-2-1 consultations.
Thank you so much!!
Thank youuuuu, Here take my like and subcription.
Thanks!!!! But Elementor hasn't fixed this problem yet?
Works fine for me
@@websquadron Oh yes, now I found the option for disable the accordion
Hi and thx for this code.. there is any way to make it scrollable??
That would take some extra JS to be written
@@websquadron can we get the JS for this specific tabs to be scrollable left to right :)
Is there a way to make the tabs sticky so you see them as you scroll down in the content?
Yes, with sticky sections.
I have a question but I can't find a code to solve the problem, I tried to create it and it didn't work either. Is it possible to set another tab button to ''true'', making a different tab open when the website loads?
Not tried that
My problem is that I added a Carousel in the last tab and in mobile it dont show up 😢
Hmmmm - it should do.
Great solution! Do you know if it is also possible to open the second tab with a link e.g. #tab2? There is only one CSS ID, but when I set the ID then it doesn't work.
Thanks for your help and by the way great content!
May need some JS to be used for that. I think?
@@websquadron Not sure how this could be implemented, but do you do such customizations as well?
Not me unfortunately
@@websquadron Hello again, I have several tabs organized, but they are now different widths. Do you have a solution for this?
As usual... IMRAN FOR THE WIN
Pro, its still not working, its how there are not 2tabs each row and tab1 and tab2 has large gap. could you tell me why?
The new tabs works fine
Do anyone elses tabs turn green on klick after inserting this CSS?
Thank yoooooo!
how to change the color of the tab from green to something else? Tried doing it from elementor panel, but ain't working
The style tab should handle that.
Can you share the URL, or post here: facebook.com/groups/websquadron
Thank you!
I was literally just looking for a fix to this.
hello sir actually the site you mentioned in the caption doesn't work , how can I use this codes?
could you please help me
i made my site with you're video (no scroll one page website video)
but I have this problem ,any way for help?
any help ?
thanks broo, ineed this..
Great code! But at my site, doesnt fully worked.
I have nested tab (a tab inside a tab) and, after put the code, the "parent" tab has gone
Could you help me with this?
I would suggest waiting until 3.14 comes out - very soon as that will correct and make this native to the Mobile Tabs.
3.14.1 Pro here, but I don't see any relevant option. And the provided code doesn't work on my site unfortunately.
Am I missing something? Anyone has an update on this issue?
EDIT: I found another code that worked, but if there is a built-in option I am not seeing, I would appreciate it if someone pointed me to it. Thank you.
You don’t need to use this now as tabs as mobile setting to stop it from being like an accordion.
@@websquadron Thank you my friend for the reply. But I am not seing anything different in the (new) "Tabs" behaviour. I had to copy, manipulate and generate enough code to achieve the desired outcome. However, I am also facing another issue, which I will shortly explain, but if you think this is not the proper place ot do it, I understand.
So, my other issue is the following: I have a Ninja Table which is placed within a tab (as a dynamic shortcode)... but just below the table I also have what looks like the table code. I am trying to make it dissapear with no luck so far.
In short.. I have a Ninja Table in a tab + its code showing underneath...
EDIT: I just noticed that a lot of things are not right with the table (buttons not displaying, text not justifying properly etc), so maybe part of the table code that is not rendering is being spit out underneath, or something... idk
Does any of this sound familiar to you?
UPDATE: There is something wrong with the elementor dynamic shortcode. I placed the shortcode directly in the text area and it's rendering properly.
(And now that I think about it, I am pretty sure I had this kind of issues with elementor shortcodes in general before..)
What about when I want the tab buttons to be on a scrollable single line?
that would be awesome too! In my caste tab names are way longer and they don't format that well
@@adrianparafianowicz802 they added this in 3.14 beta but it’s badly implemented. It doesn’t use native scrollbars
Thanks bro!
How can I make it horizontal scrollable
Use the new nested tabs widget now
@@websquadron I'm using column 🥲 I deactivated flexbox container because of some things I can't do or don't know how to do with container
Do you know of a way to select the default open tab on load ?
It should always open on Tab 1
@@websquadron That's the issue . I was asking if you know of a way to have another tab open by default on load...For info I didn't find any option for that and ended up using some JS to simulate a click on the tab I wish openned at start. Thanks
THANK YOU
NICE!!! THANKS
Hi @websquadron, I noticed today that none of my tabs appear anymore on mobile, it's been working fine for a few months but I'm not sure at what point it changed. Was wondering if you, or anyone else has had the same issue recently?
Are you using the new EL settings
EL? I'm sorry, what are those? @@websquadron
Is it the hosting settings with elementor cloud? Gonna work through them to see if it is.
Tried hosting setting but no, not them squadron leader.@@websquadron
it doesn't work properly to me, when i entered the code tab title was vanished 😰
Have you got any other CSS applied?
@@websquadron I didn't mixed with you anything
@UCGluwQk6s9QXVQozEDdW%F0%9F%99%8F%F0%9F%99%8FCcQ hey, I wrote these code, It shows both tabs in the colum and row also, how could i remove the row. please tell me.
selector .e-n-tabs {
flex-direction: row;
}
@media (max-width: 768px) {
selector .e-n-tabs {
flex-direction: column;
}
selector .e-n-tabs-heading {
display: flex;
justify-content: space-between;
}
selector .e-n-tab-title {
width:50%;
text-align: center;
}
}
I am using elementor pro 12 but this code is not run for me. Can anyone know solution?
Could be many reasons but the code does work
@@websquadron The code is working fine now. I didn’t active the nestes elements that's was the reason. Thanks
@@sayedhridoy5756 Awesome :)
Thanks
Lol exactly what I did for a client last week because they didn't like that on mobile after tapping a tab title it would jump to content randomly and not start at the top. Very bad UX
Yup - glad you got there
Doesn't change anything, would love this fix, any advice what I'm doin wrong?
Works for me.
What else do you have on that page?
Are you using any other Class name as well
@@websquadron Sorry my mistake, this does work a treat, thanks so much for this and many other videos, a massive help!
custom css is pro elementor. any other way for free elementor?
What about your theme?
i am using blocksy @@websquadron
Hello may i help me with code how to one line and scroll please
Sure but that’s part of 1-2-1 consultation
Brilliant as always!! but after applying this i have this error "Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions."
Failing Elements:
div.elementor-element > div.elementor-widget-container > div.e-n-tabs > div.e-n-tabs-content
Yup it’s only a hack fix until something better comes along
Seems like the new elementor update messed it a bit up, the tabs aren't the same size anymore!
Use the inbuilt Nested Tabs feature for keeping it at the top.
@@websquadron can you explain this?
@@driesvandenbroecke1697 It's built into the settings to keep it at the top
Hello. I don't see where is the built in feature in the nested tabs ? Do you have a screenshot of where it is ?@@websquadron
@@sayangohan2593 same here
It's solve issue. Thanks
You would have to have really tiny title on the tabs for them not to get a bit squashed in this way. Isn't it better to make the buttons full width with something like this:
.e-n-tab-title {
flex-shrink: 0;
max-width: 100%;
flex-basis: auto;
}
Yup you can do that too
Small typo in the code:
flex-wrap: wrap; !important;}
should be
flex-wrap: wrap !important;}
Well spotted.
I knew it!
Hi Imran, the code didn't work. :(
I've run it on several sites and it's fine.
Add this to the CSS ID per Tab: #tabs-services
Can you share a URL for your page?
Did this work for you?
@@websquadron Hi Imran, sorry for the late reply. I think it is because I am using the Elementor Pro Tabs. Will this code work on tabs?
tnxxxxx
the code doesnt work anymore, try this one:
selector .elementor-tabs-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
-webkit-box-pack: center;
list-style: none;
}
selector .elementor-tab-mobile-title{
display: none;
}
selector .elementor-tab-desktop-title a{
color: black !important;
}
selector .elementor-tab-desktop-title a:hover{
opacity: 0.5;
}
selector .elementor-tab-desktop-title.elementor-active a{
color: red !important;
opacity: 1;
}
selector .elementor-tab-desktop-title{
padding-top: 10px;
padding-bottom: 10px;
}
The new tabs widget has a mobile adjustable version now :)
@@websquadron I couldnt find that option inside the Tabs widget, could you please tell us where it is? Thnxs
@media (max-width: 767px) {
.e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
display: flex;
flex-wrap: wrap !important;}
.elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active {
display: none;
}
.elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) {
display: none;
}
div.e-collapse:nth-child(1){display: none !important;}
#tabs-services {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
width: auto;
}
#tabs-services .tab-title {
width: auto;
flex: 0 0 auto;
}
.e-n-tab-title {
flex-shrink: 0;
max-width: 120px;
flex-basis: auto;
}
}