How to remove shadow from sub-menu Item

Store Design
, , , , , , , , , , , ,

Topic summary

Issue: A user wants to remove the shadow appearing under their Shopify store’s sub-menu items (specifically under the PRODUCTS menu).

Solution Provided:

A step-by-step CSS customization was offered:

  1. Navigate to Shopify admin → Online Store → Edit Code
  2. Locate the theme.liquid file
  3. Add custom CSS code above the </head> tag

Code snippet:

ul.header__submenu.list-menu {
  border: none !important;
}

This CSS removes the border styling causing the shadow effect on the submenu. The solution targets the specific class used for header submenus in the theme.

Status: Solution provided; awaiting confirmation from the original poster on whether it resolved the issue.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi, how can I remove the shadow under the sub-menu item?

CreatorTim_0-1738532782425.png
CreatorTim_0-1738532782425.png517Ă—222 35.7 KB

Here is my store, and the sub-menu item is under PRODUCTS:
https://1049xn-ya.myshopify.com/

Thank you so much!

2

Hi @CreatorTim

I hope you are well. You can follow our instructions below:1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}

ul.header__submenu.list-menu {
border: none !important;

}

{% endstyle %}

1 Like