• 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

[Resolved] 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

  • This topic has 8 replies, 2 voices, and was last updated 5 years, 5 months ago by carroc.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 11, 2015 at 5:48 pm #463
    carroc
    Participant

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

    August 11, 2015 at 5:52 pm #464
    Chinmoy Paul
    Moderator

    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, 5 months ago by Chinmoy Paul.
    August 11, 2015 at 5:59 pm #466
    carroc
    Participant

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

    http://www.brashhiggins.com/

    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;
      }
      
    }
    August 11, 2015 at 6:42 pm #468
    carroc
    Participant

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

    August 11, 2015 at 6:48 pm #469
    Chinmoy Paul
    Moderator

    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.

    August 12, 2015 at 3:50 am #472
    Chinmoy Paul
    Moderator

    Hi

    Undo the previous work and download this add-on.

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

    Thanks
    Chinmoy

    August 12, 2015 at 3:59 am #473
    carroc
    Participant

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

    August 12, 2015 at 4:47 am #474
    carroc
    Participant

    nevermind – he cleared cache and it went away.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
Log In

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