if this also works on mobile devices (I remember that it didn’t work with older browsers), then it is probably the best performing solution. Because a script solution would have to constantly query the screen width, which is why a “debounce and resize” function would have to be used for performance reasons. Enfold itself provides such a function. (Enfold’s debouncedresize function is a performance-optimized way to handle resize events without triggering excessive function calls)

function custom_logo_for_mobile(){
?>
<script>
(function($) {
    function updateLogo() {
        var $logo = $('.logo img'); // Select the logo image
        var mobileLogo 	= "/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.webp";
        var defaultLogo = "/wp-content/uploads/desert-tortoise-council-50th-ann-logo.webp";

        if ($(window).width() <= 1024) {
            $logo.attr('src', mobileLogo); // Use mobile logo
        } else {
            $logo.attr('src', defaultLogo); // Use default logo
        }
    }

    // Trigger logo update on debouncedresize
    $(window).on('debouncedresize', function() {
        updateLogo();
    });

    // Run logo update on initial load
    $(document).ready(function() {
        updateLogo();
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_for_mobile', 20 );

so this works too – but the srcset originally generated (during loading) remains and is then also displayed.
I don’t know how to change the srcset as well. If I switch off the responsive images under Performance, the change of logo images is also displayed at the frontend.

hm – that works best till now:
:lol

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

Can you please remove the relevant snippets from your functions.php (save them to your desktop) and insert this instead?

function change_logo_with_screenwidth(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		
		// this is for loading the page on smaller screen-width 
		if ($(window).width() < 1025) {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
		}
		else {
			$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
		}

		function b() {
			if ($(window).width() < 1025) {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
			}
			else {
				$('.logo img').attr('src', 'https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo.png');
			}
		}

		$(window).on('debouncedresize', function() {
			b();
		});

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

we had to see if the srcset inserted images will follow that script …

The if(wp_is_mobile()) { is a check if you are watching it on a mobile device ! : Link

is that what you try to do – or do you always want to change the logo if the header turns to header top posiiton – even for desktop screens lower than a given value (1024px)

this maybe a quick and dirty way – and please test if it works on other browsers – and mobile browsers too:
( in that case – you do not need those functions.php entries – but i will look if there is a solution for that too)

@media only screen and (max-width: 1024px) {
    .av-logo-container img {
        content: url('https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-50th-ann-logo-hor.png');
    }
}

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: