Changing logo for Mobile

[anrozier1925]

Hello!

I tried the steps in the thread below, but my logo does not appear on mobile. I tried to use just the image of the logo instead of the words, and it is still not working. Is there anything I can do to fix this issue?

Change logo on mobile version - 2017 update

[nabeel]

Hi there,

Thanks for writing around! The solution you’ve tried works too, you need to refresh the page while in smaller screen. Re-sizing window won’t work in your case. However you can remove your previous customization and try a CSS solution instead by adding the following code in the Theme Options > Global CSS:

@media screen and (max-width: 767px) {
  .x-brand.img {
    background: url(http://www.dekalbhealth.net/_NEWSITEBETA/file/2018/03/dcboh-mobile-logo.png);
    background-repeat: no-repeat;
    display: block !important;
    background-size: contain;
    min-height: 150px;
  }
  .x-brand img {
    display: none;
  }
}

Let us know how this goes!

[anrozier1925]

@Nabeel

@media screen and (max-width: 767px) {
.x-brand.img {
background: url(http://www.dekalbhealth.net/_NEWSITEBETA/file/2018/03/dcboh-mobile-logo.png);
background-repeat: no-repeat;
display: block !important;
background-size: contain;
min-height: 150px;
}
.x-brand img {
display: none;
}
}

Thanks!

I tried this and it does not display the logo at all.

Is there another solution?

[nabeel]

Hi again,

That’s happening due to the custom code you’ve added in the Customizer. Please find and remove all of your Custom CSS you’ve added first (make sure to take a backup) and then add the following code:

.x-logobar-inner {
    margin: 0 !important;
}

This should get things fixed. Let us know how this goes!

[anrozier1925]

Ok this works, but the code you ask me to remove is code I actually put there so that the logo on desktop is positioned correctly.

Is there anyway I can just change the CSS within the @media screen section to allow the logo on mobile to be position correctly, instead of changing it within the .x-logobar-inner css?

[christopher]

Hi there,

The current position of log I see on the page seems to be ok on desktop. I suggest that you update the code given and add the positioning to center it for the mobile view:

@media screen and (max-width: 767px) {
.x-brand.img {
background: url(http://www.dekalbhealth.net/_NEWSITEBETA/file/2018/03/dcboh-mobile-logo.png);
background-repeat: no-repeat;
display: block !important;
background-size: contain;
background-position: center center;
min-height: 150px;
}
.x-brand img {
display: none;
}
}

Thank you.

[anrozier1925]

Thanks! The logo works better on mobile view.

[nabeel]

Glad we could help.

Cheers!