[Resolved] Mobile Header customization. Logo o second row

[Christine]

Hi,

I want the mobile logo on second row as it is there in http://prntscr.com/ohlpdc

Please help.

[Tom]

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 🙂

[Christine]

Hey Tom.

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

[Tom]

Awesome, glad I could help 🙂

[Christine]

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.

[David]

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;
}

[Christine]

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

[David]

Add this CSS to center the logo on mobile:

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

[Author]

Posts