call different image for mobile

[carroc]

Hi – I want to call a different image for small screens but it isn’t working as expected. Can you tell me what to change? Now it has the main header and I see the new one behind it.

@media only screen and (max-width: 425px) {

.header-full-width .title-area {
background: url(my url) no-repeat;
}

[Chinmoy Paul]

I think that you did not add the closing bracket and css is not working for this reason.

Code will be like this

@media only screen and (max-width: 425px) {
 .header-full-width .title-area {
    background: url(ENTER YOUR IMAGE URL HERE) no-repeat center center!important;
  }
}

PS: Can you share your site URL?

• This reply was modified 5 years, 10 months ago by Chinmoy Paul.

[carroc]

I have the closing bracket, just didn’t paste it. The logo for mobile is still behind the main one.

http://www.brashhiggins.com/

[Chinmoy Paul]

That way it will not work. I did a test on local machine. Here is the steps for this:

1. Open the output.php file which is located in lib/admin folder.
2. Find this function name “flex_header_logo”
3. Replace this code

//* Adding inline logo
  if( get_header_image() ) {
  	$logo = '<img src="' . get_header_image() . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" width="' . get_custom_header()->width . '" height="' . get_custom_header()->height . '" id="logo" />';
    $logo = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $logo );
  }

with

$mobile_logo = 'http://www.brashhiggins.com/wp-content/uploads/2015/06/Brash_Higgins_Logo.png';
//* Adding inline logo
  if( get_header_image() ) {
  	$logo = '<img src="' . get_header_image() . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" width="' . get_custom_header()->width . '" height="' . get_custom_header()->height . '" id="logo" />';
    $logo .= '<img src="' . $mobile_logo. '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" width="360" height="150" id="mobile-logo" />';
    $logo = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $logo );
  }

4. Last and final step: Add the following code in your style.css file

#mobile-logo {
  display: none;
}

@media only screen and (max-width: 425px) {

  #logo {
    display: none;
  }
  
  #mobile-logo {
    display: block;
  }
  
}

[carroc]

That worked great, thank you. How can I make sure that doesn’t get undone with any updates?

[Chinmoy Paul]

Then you can create an add-on for this. This way it will not override by latest update.

Tomorrow morning I shall test this deeply and try to resolve this problem.

[Chinmoy Paul]

Hi

Undo the previous work and download this add-on.

https://github.com/SimpleProThemes/flex-alternate-mobile-logo/

Thanks
Chinmoy

[carroc]

Client says on his Macbook he sees both logos. Did you test on Macbook? I don’t have one.

[carroc]

nevermind – he cleared cache and it went away.

[Author]

Posts