Mobile header menu is distorted on Crave theme

Hey! The menu wording format is somehow super weird on the mobile it’s shadowing and overlapping… While, on the desktop it’s all pretty and nice. It’s crave theme and website is https://aromeli.com/.

Please help me, thanks!

Hey @ugneugne ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag type the following. Screenshot attached for reference.’


Screenshot is for reference only, the correct code to paste is the one shown above.

Thanks a lot it worked, but now the menu on the desktop and on the mobile is really “light”. Is it possible to bold it?

Sure! Just change it to this


Hello @ugneugne ,

Your website has horizontal overflow scrolling. Use this code to address the issue:
In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

.section-template--20056831689040__custom_liquid_7ptXHa-padding video {
    width: 100% !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

could I kindly ask you the last thing?

on mobile, with the drop down of the main menu, it is very difficult to see the navigation items as all of them drops on the transparent background. Is there a way to make it more user friendly? E.g. make the drop down background white or something? ?

worked wonders once again..

Hello @ugneugne ,

The drop down background color is white try this code.
In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

nav.menu-drawer__navigation{
       background-color: white !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Hey @ugneugne ,

I would suggest leaving the background transparent and changing the text to white, your website looks better that way and the options are very visible

Add on this code


Thank you so much! Such a great advice!