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!
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.
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.
Thanks for the access.
I have made a small adjustment. Please check it now.
Great job with the customization!
WIth kind regards.
This is exactly what I needed, thank you so much!
Great support, as usual. :-)