Different mobile logo

Hi. Could you please suggest me how to insert a different logo for mobile users? Currently your theme resizing the main logo and inserting it to the right side on mobile screen. My logo doesn’t look good on mobile screen so I want to make it more neat.

Thanks

Did you follow the suggest size requirements/suggestions for the logo? I have no problem on mobile and desktop screens.

Theme Panel -> Header -> Logo

I did. My logo looks good on PC, but it includes some text and graphics, so when theme resize it, it doesn’t look good on mobile. I want to make simpler version.

You could try looking in the style.css located in the theme folder

You could try setting the background image to a separate logo LINK

may have to make the change the z level to ensure it is on top.

Thanks adgower.
Unfortunately I’m not a CSS expert 🙂
Anyway, I would like to hear from dev team about the solution.

Thanks in advance.

response via email
Radu A

Any chance I could get that solution as well? Thanks!

me to?

Hello kazantipman

Look in the Style.css
Line 668-685

You have to find this code

@media (max-width: 767px) {
.mobile-logo-wrap img {
width: 170px;
position: absolute;
right: 10px;
top: -3px;
display: block;

Just add z-index: 9999; in the end, after display: block;
it should be like this

@media (max-width: 767px) {
.mobile-logo-wrap img {
width: 170px;
position: absolute;
right: 10px;
top: -3px;
display: block;
z-index:99999;

AND SORRY FOR MY ENGLISH, JUST TRYING TO HELP 🙂
BaBa Baker