How can I change the drop-down menu color on my Symmetry theme website?

Store Design
, ,

Topic summary

A user seeks help changing the drop-down menu color on their Symmetry theme website. Currently, when hovering over navigation items like ‘SHOP’, both the menu bar and navigation bar turn white. The desired behavior is for only the drop-down menu to become white while keeping the navigation bar transparent.

Solution provided:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate the Layout → theme.liquid file
  • Add custom CSS markup at the bottom of the file

Outcome:
The solution was successfully implemented and resolved the issue.

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

Hi,

Right now my website is Symmetry theme. And my mouse touched the navigation like "SHOP’, there is whole menu bar and navigation bar become white. But I want the action like just the drop-down menu become white color and the navigation bar remain transparent. There is an example below. Could anyone can help? Thanks!

Here is my website: https://phantomgogo.com/

截屏2023-03-23 下午12.00.38.png
截屏2023-03-23 下午12.00.38.png1462×524 111 KB

2

Hello @Kathy518

To make header like picture you attach follow this steps :

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find layout > theme.liquid and paste this at the bottom of the file:

Hope this works well.

Best Regards !

1 Like
3

Thanks a lot. It works.!!