[Support request] Mobile header logo not displaying properly

[Glenn]

when I set mobile to display a logo it shows it in the menu bar and is miniture in size

[Elvin]

Hi,

We can address this issue by adding this CSS:

/* Change logo size */
@media (max-width:768px){
.site-logo.mobile-header-logo img {
    height: 100px;
    width: auto;
}
}

Replace the value of height property to your size preference. 🙂

[Glenn]

Hi Elvin

this addresses the size issue but not the positioning.

The logo is still displaying in the menu bar instead of above it as it does on a pc.

[Glenn]

Also Elvin

when i switch off mobile header the log then displays in the right position (above the menu bar)

But i want to use a different logo on mobile !

[Elvin]

The logo is still displaying in the menu bar instead of above it as it does on a pc.

But i want to use a different logo on mobile !

Oh right yeah my bad. I forgot to include this CSS code.

nav#mobile-header .inside-navigation.grid-container.grid-parent .site-logo.mobile-header-logo {
    width: 100%;
    background-color: white;
    margin: auto;
}

And if you want the logo to be placed on the center, you simply add justify-content: center;.

[Glenn]

Thats awesome Elvin, thank you 🙂

[Elvin]

No problem. 🙂

[Author]

Posts