Logo for mobile devices

[meilusiono]

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

[Laura]

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 🙂

[meilusiono]

It works! Thank you so much 🙂

[meilusiono]

This reply has been set as private.

[Laura]

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 🙂

[meilusiono]

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.

[Laura]

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 🙂

[meilusiono]

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!

[Laura]

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 🙂

[meilusiono]

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.

[Laura]

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 🙂

[meilusiono]

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

[Laura]

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 🙂

[meilusiono]

Great, thank you!

[Radu]

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 ?

[meilusiono]

This reply has been set as private.

[Radu]

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 ?

[dlance8888]

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

[Radu]

@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 ?

[dlance8888]

Whens the next update?

[Radu]

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