see again : https://webers-testseite.de/pureinstall/impressum/

just create a top navigation on dashboard – menus ( do not forget to check on the bottom that field: “Enfold Child Secondary Menu ”
then click on the link “Will be displayed if you selected a header layout that supports a submenu” you will be redirected to the header – header extra elements – Header Secondary Menu.

then this comes to your quick css:

/******** Tabs in top-menu *************/
#header_meta.container_wrap {
    background-color: #000f36 !important;
}

.responsive #header_meta .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
}

#header_meta .sub_menu {
    padding: 0 10px 0 50px !important;
}

ul#avia2-menu {
    margin: 0;
    margin-top: 2px !important;
    padding: 0;
    height: 40px;
    float:left;
}
 
ul#avia2-menu li {
    list-style: none;
    float:left;
    padding: 0 1px !important;
    height: 40px;
    border: none !important;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
 
ul#avia2-menu li a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a {
    border-radius:  20px 20px 0 0 !important;
    color: #fff;
    display: block;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
}

ul#avia2-menu li a:hover,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a:hover,
ul#avia2-menu li.current-menu-item a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a {
    opacity: 1;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul#avia2-menu li.current-menu-item a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a,
ul#avia2-menu li.current-menu-item a:hover,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a:hover  {
    background: #fff;
    color: #000 !important;
}

ul#avia2-menu li a:hover {
    color: #fff !important;
}

@media only screen and (max-width: 767px) {
   #header_meta .sub_menu {
       padding: 0  !important;
   }

    ul#avia2-menu li a {
        padding: 0 10px;
    }

   ul#avia2-menu {
       margin-top: 0 !important;
    }
}

i like this glooming hover effect – but you can change it to a background-color.
that it has that tab feeling the active state ( current item ) should have the same color as header bg-color.
On transparency header it is hard to find a similar effect.

If it does not work at the moment – a mod is in that installation to look for a little bug with google recaptcha.

BUT : my advice is to hamper that behavior on small screens – because you can not scroll inside the footer content.
If the height of the footer content is higher than the given f.e. mobile-device height – then you can not see all content !!!

It seems that this is not the right understanding of fixed or parallax background.

On your example page that effect is called “curtain-effect” and is commonly used on the footer.
how to achieve this. the main point is that the footer position is set to fixed and bottom: 0 – and has a z-index less than the content scrolling over it.
But: On Enfold it is difficult to obtain , because #footer is part of #main. But there are ways to get the right solution for it in a different way.
But to give you better support it might be usefull to see your page.

Thats what i said – set .av-outer-tab-title to display none

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