Mobile Header customization. Logo o second row

Hi there,

Give this a shot:

.site-logo.mobile-header-logo {
    -webkit-box-ordinal-group: 11;
    -ms-flex-order: 10;
    order: 10;
    position: relative;
    left: auto;
    transform: unset;
}

.site-logo.mobile-header-logo img {
    height: auto;
}

Let me know :)

Hey Tom.

As usual you Rock. Thanks Man... It really worked!

Awesome, glad I could help :)

Hi,
On mobile Logo is appearing very big and also when I scroll the webpage Logo is staying sticky . We want top bar to be sticky and not the logo.

Please Help.

Hi there,

so this line of CSS that Tom provided:

.site-logo.mobile-header-logo img {
    height: auto;
}

Change the auto to a fixed size eg. 80px

To remove the logo on sticky try this CSS:

#mobile-header.is_stuck .site-logo.mobile-header-logo {
    display: none;
}

That is working. Thank you.

.site-logo.mobile-header-logo img {
    height: auto;
}

This is reducing the height but not taking the image to center.
Let me know if you can help.

Regards

Add this CSS to center the logo on mobile:

#mobile-header .site-logo.mobile-header-logo {
    margin-left: auto;
}