change the site-header image on mobile

Hey there waterbod,

How are you today?

Not sure if this is the best possible solution but you should be able to do this with some custom CSS. Please try adding following CSS code in the style.css file of your child theme or add it in your site using the following plugin:

https://www.ads-software.com/plugins/simple-custom-css

@media screen and (max-width: 600px){
div#site-header {
background: url(your_image_url);
}

#site-header img {
visibility: hidden;
}
}

Replace your_image_url with the actual URL of the image you wish to use on resolutions of 600px and less. This should display your image on smaller resolutions.

Hope this helps ??

Best regards,
Bojan

Hi Bojan,

Thanks so much for your prompt response – and it works perfectly!

Only 1 thing is a bit odd:
When I shrink the screen down to mobile size – I can still click on my replacement image to return to the home page, however on my mobile phone the link seems inactive so I can’t return.
Any ideas?

Btw thanks for that plugin ref, I’ll check it out.

Many thanks.

Hey again waterbod,

This is because regular site header is having HTML image which is wrapped with link. I used CSS on smaller resolutions to hide that image which hidden the link as well and also used CSS to add background image on site-header div.

Alternative to the top solution would be to use jquery to change the image on smaller resolutions.

Please add this jquery to .js file in your theme (example functions.js):

jQuery( document ).ready( function( $ ) {

   function change_image_res() {

       if ( $( window ).width() <= 600 ) {
           $( '#site-header a img' ).attr( "src", 'https://localhost/wporg/wp-content/uploads/2014/12/cropped-cropped-shutterstock_123547271.jpg' );
       } else {
           $( '#site-header a img' ).attr( "src", 'https://localhost/wporg/wp-content/uploads/2015/01/cropped-shutterstock_29427781.jpg' );
       }
   }

   $( window ).load( function() {
       change_image_res();
   } );

   $( window ).resize( function() {
       change_image_res();
   } );

} );

Replace image links with the links of the images you want to use. This should change the image on smaller resolutions and keep the link on both.

Hope this helps.

Best regards,
Bojan

Hi and thanks again Bojan,

That’s great – it looks like the simplest solution – I’ve never yet used Jquery but will try your solution out tomorrow when it’s daylight here : )

Thanks again for all your help!

Kind regards,
waterbod

Hey waterbod,

Please let me know how that goes ??

Cheers,
Bojan

Hi Bojan,

I’ve tried using the function but I got a parsing error and my website didn’t come up.

Maybe I should try the Css rather as I’m a bit more familiar with Css. I’m not sure however what to add to make the header link to the home Url.

Thanks again!
waterbod

This the error I get:

Parse error: syntax error, unexpected ‘$’, expecting ‘&’ or variable (T_VARIABLE) in /home…………..wp-content/themes/twentyfourteen-child/functions.php on line 28

Hey there waterbod,

In case you’re adding the code in function.php of your child theme and in case it is empty please try adding the following code:

<?php
add_action('wp_head', 'my_custom_js_script');

function my_custom_js_script(){
?>
<script>
jQuery( document ).ready( function( $ ) {

   function change_image_res() {

       if ( $( window ).width() <= 600 ) {
           $( '#site-header a img' ).attr( "src", 'https://localhost/wporg/wp-content/uploads/2014/12/cropped-cropped-shutterstock_123547271.jpg' );
       } else {
           $( '#site-header a img' ).attr( "src", 'https://localhost/wporg/wp-content/uploads/2015/01/cropped-shutterstock_29427781.jpg' );
       }
   }

   $( window ).load( function() {
       change_image_res();
   } );

   $( window ).resize( function() {
       change_image_res();
   } );

} );
</script>
<?php
}
?>

This should do the trick ?? Please let me know if it works.

Cheers,
Bojan

Hi Bojan,

Thanks for that –
I’ve added that extra code in, I don’t get the error but now the images won’t swap.

?

The content of my functions.php file:
`
<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’ );
function enqueue_parent_theme_style() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}

// unregister sidebar to remove left sidebar of Twenty Fourteen

function remove_left_sidebar(){

unregister_sidebar( ‘sidebar-1’ );

}

add_action( ‘widgets_init’, ‘remove_left_sidebar’, 11 );

// add a favicon to your site
function blog_favicon() {
echo ‘<link rel=”Shortcut Icon” type=”image/x-icon” href=”‘.get_bloginfo(‘stylesheet_directory’).’/favicon.ico” />’ . “\n”;
}
add_action(‘wp_head’, ‘blog_favicon’);

// mobiles

function my_custom_js_script(){
?>
<script>
jQuery( document ).ready( function( $ ) {

function change_image_res() {

if ( $( window ).width() <= 600 ) {
$( ‘#site-header a img’ ).attr( “src”, ‘https://www.creativehosp.com/temp/wp-content/uploads/2015/02/creativehospitality-logo-sml.png&#8217; );
} else {
$( ‘#site-header a img’ ).attr( “src”, ‘https://www.creativehosp.com/temp/wp-content/uploads/2015/02/creativehospitality-logo.png&#8217; );
}
}

$( window ).load( function() {
change_image_res();
} );

$( window ).resize( function() {
change_image_res();
} );

} );
</script>
<?php
}

?>

Hey there waterbod,

Could you please upload those images into your WordPress media library in your admin panel and then replace the URL of those images in your functons.php with the URLs from your media.

Hope this helps ??

Best regards,
Bojan

Hi,
THanks.

The Urls are still the same – as I have them in the code.

FYI – I originally uploaded the small logo via Filezilla, but have now deleted it then added it via Media, but the Url is still the same. I have tested both Urls.

What could be wrong? It is only the small logo that is not being picked up.

Thanks again

Hey again waterbod,

I just double checked the code in you inserted in your child theme functions.php and it appears that you’re missing the first line below the “<?php” part which is:

add_action('wp_head', 'my_custom_js_script');

Please make sure to copy whole code I provided in my previous post.

Hope this helps ??

Best regards,
Bojan

Hi Bojan

Thanks – sorry I missed that (must be the heatwave here)

The mechanism works now, there is just one other thing happening…
on my mobile the original header is still displayed for a second or two before the new one shows which is bit confusing, like an animation.

Btw thanks so very much for your ongoing patience with this one!

Kind regards, waterbod

Hey again,

I checked that on my end and there was no animation when switching between the header images. Could you please post link to your site so I can take a look?

Best regards,
Bojan