Change screen size when transitioning from desktop to mobile menu

LazyDiver

Hi Apollo team,

How should I edit/add a custom css so that my header transitions to the mobile menu (hamburger icon) from a larger screen screen size/px? I have a one-line logo-centered header variant, so my menu needs to transition to the hamburger icon earlier. I have long labels for my menu items and they go all over the place when I make the window size of my browser smaller.

Thank you in advance for your help!

Air

Hey :-)

It is rather difficult as it would require changes in many files CSS, JS and PHP.

I would rather try to work on some custom CSS that would reduce padding and font-size for smaller resolutions.

Could you share a live link to the page in question?

With kind regards.

LazyDiver

Hi Air,

Thank you for your response.

The page is not live yet, but I can give you temporary access. Could you please remind me again how to share the details privately?

I would prefer not to reduce the font size or the padding because the older generation is part of my target market. :-) Actually, I was able to partly achieve what I want; but my issue is having the hamburger icon and the basket icon not appearing inline on a larger screen because I changed the width of the tool icons column (and it's not yet switching over to mobile mode).

I attached the screenshots.

Cheers!

Air

Hey :-)

Thanks for the access.

I have made a small adjustment. Please check it now.

Great job with the customization!

WIth kind regards.

LazyDiver

Hi Air,

This is exactly what I needed, thank you so much!

Great support, as usual. :-)

Best regards.