i hope – if Günter or Ismael knows a much easier way to obtain that. ;)

i think that the above mentioned transition to show the text disturbs a bit the whole timing.
but try with a bit more delay

#top .avia-icon-circles-icon-text {
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

for child-theme functions.php:

function rotation_of_active_circle_icons(){
?>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
    const parent = document.querySelector('.avia-icon-circles-inner');
    const icons = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon');
    const texts = parent.querySelectorAll('.avia-icon-circles-inner .avia-icon-circles-icon-text');
    let currentIndex = 0;
    let intervalId;

    function updateActiveClass() {
        // Remove the 'active' class from all elements
        icons.forEach(icon => icon.classList.remove('active'));
        texts.forEach(text => text.classList.remove('active'));

        // Add the 'active' class to the current index
        setTimeout(() => {
			icons[currentIndex].classList.add('active');
			texts[currentIndex].classList.add('active');
		}, 1500);

        // Update the index to the next element (loop back to 0 if at the end)
        currentIndex = (currentIndex + 1) % icons.length;
    }

    function startIntervalWithDelay() {
        // Add a delay before starting the interval
        setTimeout(() => {
            updateActiveClass(); // Ensure the first activation happens after the delay
            intervalId = setInterval(updateActiveClass, 6000);
        }, 3000); // 3-second delay before starting the interval
    }

    function stopInterval() {
        clearInterval(intervalId);
    }

    // Start the interval with delay
    startIntervalWithDelay();

    // Pause on hover and resume on mouse leave
    parent.addEventListener('mouseenter', stopInterval);
    parent.addEventListener('mouseleave', startIntervalWithDelay);
});
</script>
<?php
}
add_action('wp_footer', 'rotation_of_active_circle_icons');

Read carefully
“For that add to your child-theme functions.php:”
so both php snippets are needed.

____________

on you style.css – remove the code – and then add : Link

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }
  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }
  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }
  #header_main {
    border-bottom: none;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px;
    max-height: 80px !important;
    line-height: 80px !important;
  }
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }  
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }
  #top .header_bg {
    background-color: transparent !important;
  }
  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #edddc6 !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  /*** depends on your setting  ***/
  #top #header.av_header_transparency #header_meta .phone-info * {
    color: #FFF !important;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #edddc6;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
  .responsive #top #main {
    padding-top: 110px !important;
  }
  .responsive #top #main .sticky_placeholder {
    height: 0px !important;
  }
  .responsive #top #main .av-submenu-container {
    position : fixed !important;
    top: 110px !important;
  }
}

.responsive #top #wrap_all #header.hide-header,
#header.hide-header + #main #sub_menu1 {
  opacity: 0 !important;
  transition: opacity 1s ease;
}

.responsive #top #wrap_all #header:not(.hide-header),
#header:not(.hide-header) + #main #sub_menu1 {
  transition: opacity 0.5s ease;
}

@media only screen and (max-width: 469px) {
  #header {
    height: 140px !important;
    max-height: 140px !important;
  }
  #header_main {
    height: 80px;
  }
  .header_bg {
    height: 140px;
  }
  .responsive #top #main {
    padding-top: 140px !important;
  }
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 60px;
    max-height: 60px !important;
    line-height: 60px !important;
  }
  .responsive #top #main .av-submenu-container {
    position : fixed !important;
    top: 140px !important;
  }

  #top .av-submenu-pos-center .mobile_menu_toggle {
    border: none !important;
  }
}

_______________

i don’t know what is all inside your child-theme functions.php – (this is not readable via the browsers or in dev tools)
both snippets of mine should be there:

function hide_header(){
?>
<script>
(function($){
  'use strict';
  var c, 
  currentScrollTop = 0,
  header = $('#header');
   $(window).scroll(function () {
      var a = $(window).scrollTop();
      var b = header.height();
     
      currentScrollTop = a;
     
      if (c < currentScrollTop && a > b  ) {
        header.addClass("hide-header");
      } else if (c > currentScrollTop && !(a <= b)) {
        header.removeClass("hide-header");
      }
      c = currentScrollTop;
  });
})(jQuery);   
</script>
<?php
}
add_action('wp_footer', 'hide_header');

and:

function close_sub_menu_on_click_items(){
?>
<script type="text/javascript">
(function($) {
  $('.av-subnav-menu .menu-item a').on('click', function() {
    $(this).closest('.av-subnav-menu').removeClass('av-open-submenu');
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'close_sub_menu_on_click_items');

please insert this to your child-theme functions.php:
(maybe a mod knows a shorter way)

function replace_one_specific_color(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($) {     

	function colorReplace(findHexColor, replaceWith) {
	  // Convert rgb color strings to hex
	  // REF: https://stackoverflow.com/a/3627747/1938889
	  function rgb2hex(rgb) {
	    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
	    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
	    function hex(x) {
	      return ("0" + parseInt(x).toString(16)).slice(-2);
	    }
	    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
	  }

	  // Select and run a map function on every tag
	  $('.flex_column, .avia-button').map(function(i, el) {
	    // Get the computed styles of each tag
	    var styles = window.getComputedStyle(el);

	    // Go through each computed style and search for "color"
	    Object.keys(styles).reduce(function(acc, k) {
	      var name = styles[k];
	      var value = styles.getPropertyValue(name);
	      if (value !== null && name.indexOf("color") >= 0) {
	        // Convert the rgb color to hex and compare with the target color
	        if (value.indexOf("rgb(") >= 0 && rgb2hex(value) === findHexColor) {
	          // Replace the color on this found color attribute
	          $(el).css(name, replaceWith);
	        }
	      }
	    });
	  });
	}
	// Call like this for each color attribute you want to replace
	colorReplace("#ea675b", "#0000DD");

})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'replace_one_specific_color');

And you only trust Mods ?

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

the reason why this fails – is that a lot of participants do not use the code tag on posting snippets here : https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/#post-1473588

Guenni007,

Yeahhhh!!! Your Code is great. That works great!!!!

function ava_g_tag_custom_script() { 
?>
<!-- Google Tag Manager -->
<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXXXX');
</script>
<!-- End Google Tag Manager -->  

<!-- Google Tag Manager (noscript) -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) --> 
<?php
}
add_action('wp_head', 'ava_g_tag_custom_script');

So many thanks for your great help!

I am so happy!

Thanks and regards strumpel

Dear support, @NIKKO @rikard
I’ve been trying to implement the Google Tag Code from Google Ads for hours.
But i get every the error:
Uncaught Error: Undefined constant “‘wp_head’” in wp-content/themes/enfold-child/functions.php:24
Stack trace:
#0 wp-settings.php(672): include()
#1 wp-config.php(104): require_once(‘/var/www/vhosts…’)
#2 wp-load.php(50): require_once(‘/var/www/vhosts…’)
#3 wp-admin/admin.php(34): require_once(‘/var/www/vhosts…’)
#4 wp-admin/theme-editor.php(10): require_once(‘/var/www/vhosts…’)
#5 {main}
thrown
What its wrong???

Here is my script
/**
* Google Tag Manager Head Script
*/
function add_custom_gtm(){
?>
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-ABCDEFGH’);</script>
<!– End Google Tag Manager –>
<?php
}

add_action(‘wp_head’, ‘add_custom_gtm’);
/**
* Google Tag Manager Body Script
*/
function google_tag_manager_body_code() { ?>
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-ABCDEFGH&#8221;
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
<?php }
add_action( ‘ava_after_body_opening_tag’, ‘google_tag_manager_body_code’, 1);

Can anybody help?

Well enfold provided the option to only show submenu items on hover or on click.

If you choose click we can edit that to only show one toggle open.
then put this to your child-theme functions.php:

function only_one_submenu_open_on_burger(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('body').on( 'click touch', '.av-active-burger-items > a', function () {
      $(this).parent('li').siblings().removeClass('av-show-submenu');
      $(this).parent('li').siblings().find('ul').slideUp( "fast");
    });
    $('body').on( 'click touch', '.av-active-burger-items .av-width-submenu > a', function () {
      $(this).closest('.sub-menu').siblings().find('li').removeClass('av-show-submenu');
      $(this).closest('.sub-menu').siblings().find('ul').slideUp( "fast");
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'only_one_submenu_open_on_burger');

after doing that i will have a look to your site to optimize if needed.

you have to have a child-theme avia-snippet-sticky-header.js file.
on line 79 there is:

remove that && ! isMobile so there is only :

if( shrinking )

if you like to minify your theme script and css files – put both files ( the script itself and the minified script to a js subfolder to your child-theme. The edited script : you can minfy the code at: https://www.toptal.com/developers/javascript-minifier

This comes to your child-theme functions.php:

function wp_change_sticky_header_script() {
  wp_deregister_script( 'avia-sticky-header' );

  $vn = avia_get_theme_version();
  $options = avia_get_option();
  $child_theme_url = get_stylesheet_directory_uri();
  $min_js = avia_minify_extension( 'js' );

  $condition  = ( isset( $options['header_position'] ) && $options['header_position'] == 'header_top' );
  $condition2 = ( isset( $options['header_sticky'] ) && $options['header_sticky'] == 'header_sticky' ) && $condition;
  avia_enqueue_script_conditionally( $condition2 , 'avia-sticky-header-child', "{$child_theme_url}/js/avia-snippet-sticky-header{$min_js}.js", array('avia-default'), $vn, true);
}
add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );