Keep the Mobile Tabs for Nested Tabs at the Top - Elementor Wordpress Tutorial - Solution with CSS

This is how to keep the Mobile Tabs for Nested Tabs at the Top - Elementor Wordpress Tutorial - Solution with CSS that is so easy to do.

Code started by William Bode :)

CSS - add to the advanced tab of the Nested Tabs feature introduced since Elementor 3.10.

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[JonSmithchannel]

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.

[uff]

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!

[tashkent]

you are the best! you always help find the answer to the most narrowly focused questions that cannot be answered anywhere else

[qpdfmmy]

PERFECT!! You saved me hella stress over this with just a CSS code! Thank You SO Much!!

[corncerts]

I keep going back to your videos. Everything is so helpful, thank you thank you!

[upfnlue]

Thank you for making these tutorials and also keeping them short and in to point

[juliachaplin]

Life Saver!!! Ok, not literally, but oh my gosh you've saved me so much time and effort. Thanks Imran and William

[eurodoq]

Fantastic, this code snippet works really well. Thanks!

[flatterycafe]

Youre the man. I Always know where to find solution for my problems

[sergio_grez]

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

[MrMidart]

I really needed this!
Thank you so much!!
I'm from Brazil!

[gauravsharmathepro]

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

[zafit]

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.

[vincemahama]

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

}

[jeenieinterpreting]

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

[rswebmarketing]

Thanks. Amazing that Elementor did not solved this problem. Mobile first, guys !

[Fernando-XXX]

You are a god among insects... thanks master!!!!

[realfbitrustme]

Thank Here take my like and subcription.

[breath-of-fire]

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

[kellarj]

In the name of my freaking mother, you are the best for sure.