So it’s about the footer page as a page in the frontend not loading the background; because in the frontend of the other pages you can see the background of that footer section.

could you please link the single page link for the footerpage?
f.e.: https://new.fiermanlawfirm.com/footer-page

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');

here is the result for that script and your “home” page:
https://webers-testseite.de/circle-rotator.mp4

or with a background-image on your text:

#top .avia-icon-circles-icon-text {
  background-image: url(https://coachcristina.com/wp-content/uploads/2024/12/WhatsApp-Image-2024-12-11-at-11.09.04.jpeg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: all 1s cubic-bezier(.175,.885,.32,1.275);
}

#top .avia-icon-circles-icon-text-inner * {
  color: #FFF
}

ok on github the filter has on top the comment: link

 * Allows to modify the default shortcode values if an attribute is missing in shortcode.
 * This will not change set attributes in shortcode.

so it is clear now – but why then the separator could be set on that example?

PS: that delay comes from the default transition timing:

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

it you set it to none – there will be no delay – see example page. But then not center image is shown.

#top .avia-icon-circles-icon-text {
  transition: none;
}

you can see here a trial:
https://guenterweber.com/

if you hover the circle the animation stops (mouseenter) if you leave the circle – animation starts again.
Why there is a small delay – between icon and icon-text – i do not know

put this to your child-theme functions.php

function rotation_of_active_circle_icons(){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 

  // Select the parent element
  const parentElement = document.querySelector('.avia-icon-circles-inner'); // Parent

  // The classes to target and toggle
  const targetClasses = ['avia-icon-circles-icon', 'avia-icon-circles-icon-text']; // children
  const activeClass = 'active';

  // Function to rotate the active class among children with specific classes
  function rotateActiveClassPair(parent, targetClasses, activeClass, interval) {
      // Get children for each target class
      const childrenGroups = targetClasses.map(cls => Array.from(parent.querySelectorAll(<code>.${cls}</code>)));
      const maxLength = Math.max(...childrenGroups.map(group => group.length));
      let currentIndex = 0;
      let rotationInterval;

      // Ensure there are children to rotate
      if (maxLength === 0) return;

      // Function to remove all active classes
      function removeAllActiveClasses() {
          childrenGroups.flat().forEach(child => child.classList.remove(activeClass));
      }

      // Start the rotation
      function startRotation() {
          rotationInterval = setInterval(() => {
              // Remove the active class from the current pair
              childrenGroups.forEach(group => {
                  if (group[currentIndex]) {
                      group[currentIndex].classList.remove(activeClass);
                  }
              });

              // Move to the next index (loop back to the start if at the end)
              currentIndex = (currentIndex + 1) % maxLength;

              // Add the active class to the new pair
              childrenGroups.forEach(group => {
                  if (group[currentIndex]) {
                      group[currentIndex].classList.add(activeClass);
                  }
              });
          }, interval);
      }

      // Start rotating initially
      startRotation();

      // Pause the rotation and remove all active classes on hover
      parent.addEventListener('mouseenter', () => {
          clearInterval(rotationInterval); // Stop the rotation
          removeAllActiveClasses(); // Remove all active classes
      });

      // Resume the rotation when the mouse leaves the parent
      parent.addEventListener('mouseleave', () => {
          startRotation(); // Restart the rotation
      });
  }

  // Start rotating the active class every 3 seconds
  rotateActiveClassPair(parentElement, ['avia-icon-circles-icon', 'avia-icon-circles-icon-text'], 'active', 3000);

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

First – seeing your staging page now – your header setting seems to be “Let Logo And Menu Position Adapt To Browser Window”
on your screenshot this is not the case – see navigation ends with content of your page.

So the conditions are a bit different now.

btw. your svg isn’t one ;). it is a svg file with an embedded png inside. – so you could neither use a png directly – or try to convert it to a real svg (only vectors inside). f.e: https://webers-testseite.de/wp-content/uploads/MuS.svg
i think the font is an Eurostile Version – the one i used from Bitstream does not fit a 100% – so if you tell me the exact name and font creator – i will find it.

…

I hope you have a happy new year! I’m now getting ready to celebrate the evening, too.

css snippets are for css style-sheets ( in your case you have inserted it to style.css)
php snippets are meant for child-theme functions.php !

First Question: do you have a shrinking header?

on Preview Project – do you see those transitions?

Did you save and publish those settings on bottom right?

i see that there is only on style.css that code .
So better remove all – and add:

i see that there is only on style.css that code .
So better remove all – and add:

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

after that we will go on to start fine-tuning.

• This reply was modified 10 months, 4 weeks ago by Guenni007.

Simple – look to the header behaviour on desktop screen width.

believe it or not – my first solution with sticky header on every screen width was the best.
Then you can decide to shift the header including sub-menu or to set those two things to opacity : 0

shifting is a lot of css – the opacity solution is nice too.

read the post carefully- that script is adding a class to the #header
so you can play with the selector: #header.hide-header to do something with the header – see example page and the code listed there ;)

f.e. (less complicated than a shift to top)

#header.hide-header,
#header.hide-header + #main #sub_menu1 {
  opacity: 0;
  transition: opacity 2s ease;
}

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

it is working – and my snippet is working too. But i wouldn’t make that space between your navigation and the first section not by setting up a margin top/bottom on color section. This looks bad on responsive case.
you could have done this:

#header_main_alternate {
  margin-bottom: 40px;
}

because header_main_alternate goes to display: none in responsive case – there will be no distance then between header and main.

By the way : nice to have a response on having success with the code ;)
no thanks is needed but just a success report