Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 25, 2022 at 2:29 pm #1349415
    roeraskholm

    Hi,

    I want to change the logo when browser window is between 767px and 990px.
    I have tried with the suggestions from this post
    but it doesn’t seem to work. Maybe because it is .svg logo.

    Can you provide a code for changing the svg logo on screens between 767 and 990?
    Thanks.

    April 26, 2022 at 9:53 am #1349483
    Ismael

    Hey Jakob Roer,

    Thank you for the inquiry.

    Are you planning to use another svg on mobile view? This might not work with the current script because you can’t dynamically replace the svg file with another. Please try to replace the code with the following snippet and make sure to use an image with a PNG or JPG format.

    add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
	<script type="text/javascript">
		(function($)) {
			$(document).ready( function() {
				if($(window).innerWidth() <= 1024){
					$('<img src="IMAGE_URL_HERE" />').appendTo("div .logo");
				}
			});
		})(jQuery);
	</script>
	<?php
}

    Make sure to replace the placeholder IMAGE_URL_HERE with the actual image URL.

    Best regards,
    Ismael

    April 26, 2022 at 10:34 am #1349493
    roeraskholm

    Hi Ismael,

    Thanks for your reply. I’ve tried your code but it doesn’t seem to be doing what was intended.
    I have made the header transparent on mobile devices. The problem is that it is showing the regular logo and not the logo set for transparent mode.
    I fixed this using this code to change the logo on mobile devices and it works, but there is still a gap between 768-990px screens.

    April 26, 2022 at 10:49 am #1349495
    roeraskholm

    … or in another sentence, it doesn’t work for browser windows smaller than 990px.

    April 26, 2022 at 12:29 pm #1349517
    roeraskholm

    Hi again,

    I figured it out. I changed the fill color on the .svg for smaller screens.
    You can close this thread :)

    Thanks.

    April 26, 2022 at 12:40 pm #1349520
    Yigit

    Hi,

    Glad you figured it out!
    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change logo on small screens’ is closed to new replies.