• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

Reply To: call different image for mobile

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › call different image for mobile › Reply To: call different image for mobile

August 11, 2015 at 6:14 pm #467
Chinmoy Paul
Moderator

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;
  }
  
}

Copyright © 2022 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates