Support › Forums › Flex Theme › call different image for mobile
- This topic has 8 replies, 2 voices, and was last updated 6 years, 11 months ago by
carroc.
-
AuthorPosts
-
August 11, 2015 at 5:48 pm #463
carroc
ParticipantHi – 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 #464Chinmoy Paul
ModeratorI 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 6 years, 11 months ago by
Chinmoy Paul.
August 11, 2015 at 5:59 pm #466carroc
ParticipantI have the closing bracket, just didn’t paste it. The logo for mobile is still behind the main one.
August 11, 2015 at 6:14 pm #467Chinmoy Paul
ModeratorThat 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 #468carroc
ParticipantThat worked great, thank you. How can I make sure that doesn’t get undone with any updates?
August 11, 2015 at 6:48 pm #469Chinmoy Paul
ModeratorThen 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 #472Chinmoy Paul
ModeratorHi
Undo the previous work and download this add-on.
https://github.com/SimpleProThemes/flex-alternate-mobile-logo/
Thanks
ChinmoyAugust 12, 2015 at 3:59 am #473carroc
ParticipantClient 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 #474carroc
Participantnevermind – he cleared cache and it went away.
-
This reply was modified 6 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.