Logo for mobile devices

This topic has 20 replies, 4 voices, and was last updated 7 years by Radu.

Author
July 3, 2017 at 13:47 #165963

meilusiono
Participant

Hi,

I need to use a different logo for the mobile version of the web because our logo is black and needs to be white in mobile version.

I’ve been searching the forum and found a solution. I applied to our website, but it’s not working.

I’m using a child theme and I added to the style.css files the following code:

@media screen and (max-width: 480px) {
.logo img { display:none; }
strong.logo a {
background-image: url(‘http://www.serliberto.com/wp-content/themes/kleo-child/images/ser-liberto-logo.png’);
min-height: 99px;
background-image: #FFC107 !important;
background-repeat:no-repeat;
}

}

I checked the image url is ok, but the code doesn’t work.

Can you help?

Thanks,

Sandra
July 3, 2017 at 19:36 #166046

Laura
Moderator
Hello, please try with
COPY CODE
```
@media (max-width: 991px) {
.logo img { display:none; }
strong.logo a {
background-image: url(‘http://www.serliberto.com/wp-content/themes/kleo-child/images/ser-liberto-logo.png’) !important;
min-height: 99px;
background-repeat:no-repeat;
}
}
```
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 3, 2017 at 20:06 #166069

meilusiono
Participant

It works! Thank you so much 🙂

July 3, 2017 at 20:11 #166075

meilusiono
Participant

This reply has been set as private.
July 3, 2017 at 20:22 #166082

Laura
Moderator
Hello, should be fixed, used this
COPY CODE
```
@media (max-width: 991px) {
.logo img { display:none; }
strong.logo a {
background-image: url("http://www.serliberto.com/wp-content/themes/kleo-child/images/ser-liberto-logo.png") !important;
min-height: 99px;
background-repeat:no-repeat;
}
strong.logo.retina-logo img { display:none; }
strong.logo.retina-logo a {
background-image: url("http://www.serliberto.com/wp-content/themes/kleo-child/images/ser-liberto-logo.png") !important;
min-height: 99px;
background-repeat:no-repeat;
}
.navbar-header .logo {
    float: left;
    width: 90%;
    margin-top: 2%;
}
}
```
🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂
July 3, 2017 at 21:55 #166109

meilusiono
Participant

Hi Laura,

thank you so much for yor prompt reply. Logo appears now in both resolutions, however in low resolutions logo is not aling with menu (see attached screenshot).

I have tried to remove the min-height, but it doesn’t work.
I have also tried using a smaller image, but it happens the same.

Thank you so much for your help.

Attachments:
You must be logged in to view attached files.

July 3, 2017 at 22:04 #166116

Laura
Moderator

Hello, please clean browser cache using CTRL+F5 it should be fixed now

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

July 3, 2017 at 22:08 #166118

meilusiono
Participant

Hi, I did so, but now it happens again that in the larger resolution logo dissapears.. I have even tried in a different browser.

Thank you!

July 3, 2017 at 22:18 #166124

Laura
Moderator

Hello, ok, now i checked both, it should be fine 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

July 3, 2017 at 22:46 #166136

meilusiono
Participant

Hi Laura,

logo has dissapeared from both views.

I have tried in Safari, Chrome and Firefox..

Attachments:
You must be logged in to view attached files.

July 3, 2017 at 23:48 #166153

Laura
Moderator

Please clear your browser cache using CTRL+F5 it works correctly for me 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

July 10, 2017 at 22:40 #166968

meilusiono
Participant

Hi, I have deleted all cache from all browsers and logo keeps dissapearing in mobile version.

I have deleted all cache from Safari, Firefox and Chrome and in desktop logo doesn’t appear.

It appears in iPhone 6, but if user reduces screen size in desktop logo dissapears.

Please resize your screen in desktop and you’ll see what I mean. Please help.

Thank you so much,
Sandra

July 11, 2017 at 00:21 #166977

Laura
Moderator

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

July 11, 2017 at 15:52 #167020

meilusiono
Participant

Great, thank you!
July 13, 2017 at 14:37 #167278

Radu
Moderator
Hi,

In future update we will implement this in theme option where you will have a separate option for logo on mobile until then, just add the next code to the wp-content/themes/kleo-child/functions.php
COPY CODE
```
function custom_logo_on_mobile() {
    if ( wp_is_mobile() ) {
        if(sq_option('logo_mobile_devices', 1)) {
            //$mobile_logo_url = sq_option('logo_mobile_devices', 1)['url'];
            $mobile_logo_url = 'http://myurl.com/image.png';
            return $mobile_logo_url;
        }
    }
}
add_filter('kleo_logo', 'custom_logo_on_mobile');
```
And replace myurl.com/image.png with your logo path from $mobile_logo_url = ‘http://myurl.com/image.png’; line

NOTE : Child theme needs to be installed and activated.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
July 14, 2017 at 13:54 #167398

meilusiono
Participant

This reply has been set as private.

July 17, 2017 at 19:42 #167717

Radu
Moderator

Hi,

The snippet had been tested before providing it, but check if you have a retina version of the logo, and delete it. also make sure to have child theme installed and activated.

If it’s the same provide FTP also

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

October 6, 2017 at 12:35 #175818

dlance8888
Participant

Any update on when this will be part of the theme?

October 6, 2017 at 19:22 #175848

Radu
Moderator

@dlance8888

Can you please provide the FTP details to can include the changes that add those features, or you can update until next update… will be included.

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

October 7, 2017 at 12:41 #175874

dlance8888
Participant

Whens the next update?

October 9, 2017 at 15:09 #176103

Radu
Moderator

Hi,

Today or tomorrow

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?
Author

Posts