Horizon Theme - Remove Mega Menu box shadow

[andie]

Hi there,

How can I remove the mega menu shadow that displays at the bottom of the mega menu in the Horizon theme (Atelier version): https://themes.shopify.com/themes/atelier/styles/atelier/preview

I have a white background and white mega menu and I just don't want any kind of ugly shadow showing up when someone opens the mega menu.

Thank you so much for the help!

[devcoders]

Hello @andie 
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[andie]

Hello there, thank you for responding so quickly - I realize you're a developer but I'd really appreciate if there might be a way to figure this out without logging in to my account. I'm pretty sure it's a 'generic' code issue not really specific to my site.

I've not changed anything about how the menu operates. So basically if you view the menu functionality on the Atelier demo store, and click on "Accessories" it takes you to the shop page with a bunch of products... and opens the mega menu where you then see this super ugly shadow come up at the bottom of the menu section. I've tried looking at the code a little... "input-box-shadow" ".mega-menu" and ".mega-menu_list" settings but that's doing nothing with regards to being able to remove the box shadow.
This is how it looks like on the demo store...(and essentially on my site)

[devcoders]

Hello @andie 

Would you like to remove this?

[andie]

Trying to remove the shadow at the bottom of the mega menu that runs the full width of the mega menu (that would otherwise replace a divider line in the dropdown mega menu) -- currently gives this appearance of a shadow all the way across the width of the page:

[devcoders]

Hello @andie 
Dear, please send me the preview link of your store. I am not seeing the shadow in this theme.

[andie]

Ah you don't see it because you opened the menu over top of the Hero image - if you open the menu and the website just has a white background instead of an image banner behind the mega menu when you open it, you'll see the shadow bottom border of the mega menu like in the first image above. I'll see if I can sort it out - so annoying that you can add a border to a header but you can't remove this stupid shadow in the basic settings of the theme....

[Betterave-Nina · Accepted solution]

Hi @andie. To remove the mega-menu shadow you'd need to do the following:

1: Go to Online Store -> Theme -> Edit code
2: Search file styles.css
3: Add the following code to the bottom of the file -> Save

.overflow-menu::after {
	box-shadow: none;
}

If applied correctly, the result should be like this:

I hope this helps! 

[andie]

Thank you so much that worked perfectly 😍

[Betterave-Nina]

Anytime! Glad I could help! 🙂