Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
  • #1233986

    I need the dropdown of the first tab to be closed by default in the mobile version.

    It is like accordion logic but in tabs.

    Attached images:
    Thank you!


    what exactly do you like to obtain? the behaviour on mobile devices or on narrow screen width? The first one is easier to reach.


    On mobile


    Those for whom it is too much text to get a solution may skip this answer. ;)

    When I began to deal with the subject, I encountered various obstacles.
    In general, there is no easy solution to these. And my first attempt to redefine the two classes responsible for the appearance ( active_tab and active_tab_container ) only by css and the class set to html if it is a mobile device (avia_mobile) would not make sense. Because then all tablets – even the Ipad Pro with its 12.9 inch size – would initially display the closed tabs.

    So when the page is loaded, it should be decided whether the tabs are open or not. When tilting the mobile device, however, it should be decided again whether the tabs are open or not.
    For example the Iphone XS: 375×812
    i.e. normally in landscape mode the tabs would be in normal view, in portrait mode the tabs would be arranged below each other.

    So I thought I would link this decision to the presence of the Hamburg Icon. Unfortunately the default setting of the tabs causes me some problems, because they usually change their appearance when resized to 768px. So there would be a discrepancy in the setting depending on the burger menu if it changes already at 990px. – But there is a Quick CSS solution.
    But there are participants here who always show the burger, so this would not be the solution.

    So I decided to create a class that I can fall back to if the screen width falls below a certain value without changing the behavior of the above mentioned classes ( active_tab and active_tab_container ).
    With this first script I set a class to body, which offers me a switch with which I can make this decision ( tab_switch ).

    Additionally I give the Tabs ALB element a custom class to decide if I want the effect or not. ( mobile-tabs-closed )


    Demo Page:
    (this is for the class on body – you decide when the switch is set)

    to child-theme functions.php

    function add_class_for_tab_switch(){
    <script type="text/javascript">
    (function($) {
    	function my_tab_switch() {
    		setTimeout( function() {
    	        if ($(window).width() <= 767) {
    			else {
            }, 150)	
    	$(window).on('load resize', function() {
    add_action('wp_footer', 'add_class_for_tab_switch');

    after that you can use these classes on quick css

    /***** Settings for closed Tabcontainers on tab switch setting ************/
    .js_active .tab_switch .active_tab_content {
    	display: none;
    	visibility: hidden;
    .responsive #top .main_color {
    	display: block;
    	visibility: visible;
    .responsive #top.tab_switch .main_color .active_tab {
    	background-color: unset;
    	color: inherit;
    .js_active #top.tab_switch .active_tab {
    	font-weight: normal;
    #top.tab_switch .main_color .tab.active_tab:hover {
    	color: #666666;

    However, these settings alone would have the effect that the tabs can no longer be opened in the “mobile” case. Since the switch case has removed this exactly. Therefore a click solution is needed to correct this.

    you see above in the css code there is an additional class i set for that decision ( mobile-tab)
    this to child-theme functions.php

    function mobile_tabs_open_onclick(){
    <script type="text/javascript">
    (function($) {
    	$('.responsive #top .av_tab_section .tab').click(function() {
    add_action('wp_footer', 'mobile_tabs_open_onclick');

    If the mods see a much simpler solution, don’t be afraid to announce it.


    If you want to change the switch point to a diffent one you had to adjust the value in the script aboveand to have some additional quick css entries:

    /****** Settings to change the tab switch point if it is different to 768px *********/
    @media only screen and (max-width: 989px) {
    	.responsive .tab_content {
    	    border-bottom: none;
    	    padding: 15px 30px;
    	    clear: both;
    	.responsive .tab_content, .responsive .tabcontainer .tab {
    	    width: 100%;
    	    max-width: 100%;
    	    border-left: none;
    	    border-right: 0;
    	    left: 0;
    	    top: 0;
    	    min-height: 0!important;
    	.responsive {
    	    border-width: 1px;
    	    border-style: solid;
    	    border-top: none;
    	    overflow: hidden;
    	.responsive .tab_titles {
    	    display: none;
    	.responsive .tab.fullsize-tab {
    	    margin-bottom: 0px;
    	.responsive .tab.fullsize-tab {
    	    display: block;
    	    margin-bottom: -1px;

    you can see now on the testpage that i have switched to 989px – to illustrate the effect and settings better.
    As long as you do not open a tab on “mobile” – you can resize the screen ( or tilt the device )


    I just saw the demo and it’s great …
    I’m going to review everything in detail and tell you.
    Thank you very much!

    Could you check for my other request please?


    Thanks – but i’m Participant as you – so the other request has some infos in private content – which i do not see.


    Thank you very much


    Sorry, now if the complete information:

    I need to build a couple of tabs in the header, just like this example.
    Is it possible to do it in any way?
    There is a version for desktop and mobile

    Thank you very much!
    This is the example of the tabs in the header


    Well you can use the top-header on that :
    Enfold Child – Header – Extra Elements Tab and : Header Secondary Menu
    you have to define one menu as: Enfold (Child) Secondary Menu ( don’t know if you are using a child-theme)
    to style them as “tabs” like in your example page should be possible


    How do I give it that style? I don’t remember seeing anything to do it



    if you are satisfied with :
    ( i just did it for that page ) then i will post the css you need.



    I’m going to check everything.
    Very grateful again


    Hi mtmundarain,

    Thanks for the update, please let us know if you should need any further help on the topic.

    Best regards,


    Very grateful to everyone, it is good to know them from the other side.

    As you ask:
    How could i make the width of the tabs the same width as the element?


    Sorry for the late reply, and thanks for the screenshot, it looks like you are using 4 tabs, do you plan on adding more tabs?
    For 4 tabs, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top .tabcontainer .tab {
        width: 25% !important;

    I recommend adding a custom class to your Tabs element in the advanced options under developer settings, and then adjust the css like this:

    #top .tabcontainer.custom-class .tab {
        width: 25% !important;

    So the css will only effect the Tabs you wish.
    After applying the css please clear your browser cache and check.

    Best regards,

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.