Loading 0
Share

Convert Elementor tabs from Accordion to menu for mobile version or keep tabs in mobile

Convert Elementor tabs from Accordion to menu for mobile version or keep tabs in mobile

For those who work with the Elementor builder, you will know that the tabs element in the mobile version turns into an accordion (as in the image below).

When the tab has little content, mainly informative, this is convenient both aesthetically and functionally.

But when the content is too large in size, it means too much height, which means too much scrolling down to find the next tab. Many times this means that visitors get confused and don't understand that it's an accordion, leaving the page with a bad sense of functionality.

 

So how do we turn mobile accordion tabs into a normal menu, above the content?

Step 1:

In the tabs element, we'll go to the "Advanced" settings and add the id: nicolas-tabs to it

Immediately after, we will go to the page settings (bottom left)

And we'll select the "Advanced" tab again

 

There we will add the following css code and press save:

@media only screen and (max-width: 600px) {
#nicolas-tabs .elementor-tabs-wrapper {
display: flex;
flex-direction: column;
}
#nicolas-tabs .elementor-tab-title{
height: 15px;
padding-top: 5px;
padding-bottom: 20px;
border:1px solid #CCC;
margin: auto;
width: 50%;
}
}
@media only screen and (max-width: 600px) {
#nicolas-tabs .elementor-tab-mobile-title {
display: none;
}
}

The code above makes the aforementioned conversion from an accordion to a vertical menu with borders, on devices with a max-width: 600px screen, i.e. mobile phones.

Now, if you want to keep the regular tabs, forget the code above and use the following:

@media (min-width: 320px) {
#nicolas-tabs .elementor-tabs-wrapper {
display: flex;
flex-direction: row;
}
}
@media (min-width: 320px) {
#nicolas-tabs .elementor-tab-mobile-title {
display: none;
}
}

Best regards, Nicolas - MaxServices.gr , NicolasLagios.com

This post is also available in: Ελληνικά

Leave a Reply

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

01.

Here you can see all the services I provide

Registration and management of domain names (website address such as www.nicolaslagios.com)

Also management of dns records (e.g. connecting the domain to a specific server, fixing email spam problems, etc.)

Also ssl renewals etc

Installation and management of web & mail server in ubuntu vps with virtualmin, plesk, cpanel

Also studying and fixing server problems.

Necessary condition, the target server meets the conditions

At the moment for new wordpress websites you can choose from ready-made themes and we change the content (no custom changes). You can buy with a fixed price by clicking here!

My team and I undertake any data bridging implementation for Wordpress, Prestashop, Opencart, Joomla platforms.

We can connect data from any source, as long as the structure is stable and there is proper documentation and briefing.

We undertake the creation, regulation and enrichment of pages for social networks: Facebook, Linkedin, Instagram (profile), Twitter (profile), Tiktok (profile).

We also undertake the first boost of your pages for quick results in followers.

We undertake the repair and maintenance of your existing wordpress website.

For more information about the services, you can read the following and return here to schedule a meeting with me: https://maxservices.gr/en/internet-services/website-services-blank/additional-website-services/