Mobile Header Width

Hi there,

can you disable the lazy loading on the logo - looks like you're using Perfmatters - see here:

https://perfmatters.io/docs/lazy-load-wordpress/#exclude

You can add the CSS Class: is-logo-image to the field they provide.

Hi,

I guess, my problem is different, not related with lazy load?

When a items added to the cart, the basket logo shows number or amount. Due to additional space (covered by the number/amount) and due to shortage of space at Header/Primary Navigation (of Mobile) the 'MENU' comes to second row.

Maybe reducing the size of the Header logo, the problem can be solved (as their will be bit extra space there). So how do I reduce the logo size at mobile? I didn't found the option at setting.

Please guide me further.

I still recommend you disable the lazy loading on that image, as the replacement HTML that plugin is generating has no width and height attributes which means the browser can reserve space for it and will cause the logo to resize.

Regarding the logo size you can use some CSS to fix its size:

#mobile-header .site-logo.mobile-header-logo img {
    width: 160px;
    height: auto;
}

Or use a logo that is more suited to the smaller mobile header.

Thank you very much. I will certainly follow both the recommendations.

Glad to be of help