Hi Mike and dear participants – i see there is a fix on github : https://github.com/KriesiMedia/enfold-library/tree/master/temp_fixes/Enfold_4_7_6_1/template_builder
concerning to : avia-tab-section.js : i don’t know if this is related to your problems – but maybe you test that new js file.

Edit: must be something different. I can not reproduce the “flickering” on tab change.

PS : i changed the code above on this: https://kriesi.at/support/topic/closed-tabs-on-mobil/#post-1234335

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

but if you can make it happen in the next few hours I will be super grateful!

How much does your gratitude look like?
If you want to do me a big favor, don’t vote for Trump ;)
Best whishes to you all from Germany.

Image

in the ai doc there are some vector datas – but the most patterns are embedded images.
So here we go with png files: https://webers-testseite.de/tagood.zip

• Give a custom class to your icon-list : tagood-icons
• upload all the png files to your media library
• put this to your quick css: ( if you like to colorize the icons as i do )
• adjust the file path to yours

.tagood-icons .avia-icon-list li .iconlist-char:before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center ;
  left:0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%
}

.tagood-icons .avia-icon-list li:nth-of-type(1) .iconlist-char:before {
  background-image: url(/wp-content/uploads/art01.png);
  background-color: red;
}
.tagood-icons .avia-icon-list li:nth-of-type(2) .iconlist-char:before {
  background-image: url(/wp-content/uploads/art02.png);
  background-color: blue;
}
.tagood-icons .avia-icon-list li:nth-of-type(3) .iconlist-char:before {
  background-image: url(/wp-content/uploads/art03.png);
  background-color: green;
}
.tagood-icons .avia-icon-list li:nth-of-type(4) .iconlist-char:before {
  background-image: url(/wp-content/uploads/art04.png);
  background-color: yellow;
}
.tagood-icons .avia-icon-list li:nth-of-type(5) .iconlist-char:before {
  background-image: url(/wp-content/uploads/art05.png);
  background-color: darkmagenta;
}

you see how this works : the first settings are the same for all icons – and then you count to your list items 1, 2, 3 etc
if you colorize you had to set a border-radius for them too
in the zip there are 6 files – but you can have more

i see that the source of the png was an ai ( Adobe Illustrator) File – that would be best – if it is a vector based file ( sometimes images are embedded in ai docs)
In this case we could make an icon-font like entypo-fontello on : http://fontello.com/

try this in quick css:

.tab.active_tab, 
:focus  {
    outline: none !important;
}

or do ask how those extra settings can be done to the head section ( not the header ) ;)

If you want to change the switch point to a diffent one you had to adjust the value in the script above – and 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 .tabcontainer.mobile-tabs-closed .tab_content {
	    border-bottom: none;
	    padding: 15px 30px;
	    clear: both;
	}
	.responsive .tabcontainer.mobile-tabs-closed .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 .tabcontainer.mobile-tabs-closed {
	    border-width: 1px;
	    border-style: solid;
	    border-top: none;
	    overflow: hidden;
	}
	.responsive .tabcontainer.mobile-tabs-closed .tab_titles {
	    display: none;
	}
	.responsive .tabcontainer.top_tab.mobile-tabs-closed .tab.fullsize-tab {
	    margin-bottom: 0px;
	}
	.responsive .tabcontainer.mobile-tabs-closed .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 )

Demo Page: https://webers-testseite.de/pureinstall/tabs-on-mobile/
(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) {
			  $("#top").addClass("tab_switch");
			} 
			else {
			  $("#top").removeClass("tab_switch");
			}
        }, 150)	
    }
	$(window).on('load resize', function() {
		my_tab_switch();
	});
})(jQuery);
</script>
<?php
}
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 .tabcontainer.mobile-tabs-closed .active_tab_content {
	display: none;
	visibility: hidden;
}
.responsive #top .main_color .tabcontainer.mobile-tabs-closed .tab_content.mobile-tab {
	display: block;
	visibility: visible;
}
.responsive #top.tab_switch .main_color .tabcontainer.mobile-tabs-closed .active_tab {
	background-color: unset;
	color: inherit;
}
.js_active #top.tab_switch .tabcontainer.mobile-tabs-closed .active_tab {
	font-weight: normal;
}
#top.tab_switch .main_color .tabcontainer.mobile-tabs-closed .tab.active_tab:hover {
	color: #666666;
}

I have never found it particularly difficult to drag and drop the separator into a color section as the last or first element.

The separator needs the surrounding container so that it has the width it needs to take up.
If you put the separator in a 1/2 container, it will have a different width than in a 1/1 container.
But if it has no surrounding container – it lacks this information. Therefore one is set.
So this only happens if you put the separator between two full-width elements.

you see on your frontend that line?

–
this is a separator – you can easily overlook this, because it is only a thin grey line in the layout.
–

hover on your advanced layout a gray line then you will see that this is an extra element.
–

If this separator is not placed in the color-section but between two elements ( like two color-sections) there will be an extra container for it:
after_section_x
and as a normal container it will have that padding-top/padding-bottom of 50px.
To avoid this extra container for the separator you can put it in the color-section.

first: because of the search-results list – it might be better to have the vertical-align on top!

#top #av-burger-menu-ul {
    vertical-align: top;
    padding: 125px 0 !important;
}

second:
but what we can do on the search input field to have no href on that menu-item ( to have the opportunity to activate text in that input field by mouse activation) – see description above – we do not have the possibility to do that on hamburger search menu item
there is:

so if the href attribut remains you can not activate text like above to get rid of “er” in weber f.e.

this to child-theme functions.php :

function remove_href_from_hamburger_search_input(){
?>
<script type="text/javascript">
(function($) {
	$('#header').on('click', '.av-main-nav-wrap', function() {
		$('#av-burger-menu-ul .searchfield > a:first-of-type').removeAttr("href");
	});	
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_href_from_hamburger_search_input');

Resultpage for your test: https://webers-testseite.de/cynthia/

ah – ok – thanks for the info

i see that you are using wp-rocket – maybe disable it and then update all caches (including the browser cache) and see if the problem persists