Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 29, 2023 at 8:22 pm #1426734
    sky19er

    Hey, I’m using the below filter to switch to a horizontal logo on https://deserttortoise.org/ , but I also have some css that switches the header to the mobile layout a little earlier (at 1024px), and of course the logo doesn’t switch if someone just has their browser on their laptop or desktop set to narrower than 1024px, so I’m wondering if there’s any way to use a browser width in the filter — maybe a browser width as an OR statement or something? Thanks!

    add_filter('avf_logo','av_change_logo'); 
function av_change_logo($logo) { 
	if(wp_is_mobile( ) ) 
		{ 
			$logo = "https://deserttortoise.org/wp-content/uploads/desert-tortoise-council-logo-horizontal.png"; 
		} 
	return $logo; 
}
    November 30, 2023 at 4:02 am #1426753
    Ismael

    Hey sky19er,

    Thank you for the inquiry.

    You can include this script in the functions.php file to dynamically switch to a different logo on browser resize. Please ensure to replace the placeholder with the actual URL of the logo image, one for mobile and another for desktop view.

    // switch logo on resize
function ava_custom_script_mod()
{
    ?>
    <script type="text/javascript">
        (function($) {
            function switchLogoImage() {
                var logo = $('.logo a img');
                var windowWidth = $(window).width();

               if(windowWidth < 1024)
               {
                   logo.attr('src', 'MOBILE LOGO IMAGE URL HERE');
               } else {
                   logo.attr('src', 'DESKTOP LOGO IMAGE URL HERE');
               }
            }

            $(window).on('debouncedresize', function() {
                switchLogoImage();
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_script_mod', 9999 );

    Best regards,
    Ismael

    November 30, 2023 at 4:27 am #1426756
    sky19er

    Perfect — thanks again, Ismael!! Feel free to close this thread.

    December 1, 2023 at 10:35 am #1426874
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘switch logo at browser width’ is closed to new replies.