Home Drop down menu

Shopify Discussion
,
1

Hello - I’m using the Savor theme (free Shopify theme) and my dropdown navigation under Shop is not showing my collections when hovered over. The menu is set up correctly in Content > Menus with Scent Rituals, Layering Rituals, and Atmosphere Rituals nested under Shop. A clean version of Savor works fine, so the issue is in my customized theme code. The CSS visibility: hidden on the submenu is not being overridden on hover. Looking for help identifying which code change is causing this.

2

Hey @N3lla

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello Moeed

here is the shop url https://lewverra.com/ i appreciate any help

4

Hi @N3lla, since the same menu works correctly on a clean Savor theme, that is a pretty strong indication that the menu structure itself is fine and the issue was introduced somewhere in the customized theme.

If the submenu is being set to visibility: hidden, I’d check the customized theme for a few things rather than only looking for the normal :hover rule:

  • another selector overriding the submenu with visibility: hidden !important;

  • a display: none rule being applied at the same time;

  • opacity: 0 combined with pointer-events: none;

  • a changed hover selector that no longer targets the actual Savor menu element;

  • custom JavaScript removing or preventing the class/attribute Savor uses to open the dropdown.

A quick way to isolate it is to open the site in Chrome DevTools, inspect the Shop submenu, and hover over Shop while watching the Styles/Computed panel. You should be able to see exactly which rule is keeping the submenu hidden and, more importantly, which CSS file/line that rule comes from.

Since you have a clean Savor copy that works, another good comparison is to inspect the same submenu element in both themes and compare the rules applied to it. That should narrow down the customization that caused the regression much faster than rebuilding the navigation.

If you can share the relevant submenu element from DevTools (especially the Computed visibility, display, opacity, and pointer-events values and the rule that is overriding them), I can help pinpoint the exact CSS change rather than guessing.

5

The submenu opens on hover. The sub-links (Scent Rituals, Layering Rituals, Atmosphere Rituals) are loading, but they are the same cream colour as the background behind them, so they are invisible.

Savor Shop dropdown open but sub-links invisible
Savor Shop dropdown open but sub-links invisible3270×1695 171 KB

Fix:

  • Online Store > Themes > Customize
  • Click the Header at the top of the preview
  • In the left panel, under Header, click Menu
  • Open Appearance (it says “Affects submenus on desktop”)
  • Your Text color is set to the same cream as Background color (#FDF6F0)
  • Set Text color to a dark shade, then Save

Header Menu block: Text color same as Background
Header Menu block: Text color same as Background1368×1940 280 KB

Background colour can stay as it is, only the Text colour needs to change.

Same dropdown with a dark Text color, links visible
Same dropdown with a dark Text color, links visible3270×1695 188 KB

notes:

  • The top links (Home, Shop) look fine because on the home page they use the transparent-header text colour, which is a separate setting.
  • If you want the dropdown to sit on a solid panel, give Background color a colour with contrast too.

Regards,
Ajay

6

Hi N3lla,

Since the menu works properly on a fresh Savor theme, I would first look at the custom CSS changes rather than the menu setup.

It sounds like one of the theme edits may be keeping the submenu hidden. Check your CSS files for anything affecting the dropdown, especially rules using visibility: hidden, opacity: 0, display: none, or !important.

You can inspect the Shop menu in your browser while hovering over it and check which CSS rule is forcing the submenu to stay hidden. That usually makes it easier to find the conflicting code.

Also compare the header/menu files between the working Savor theme and your customized version. Sometimes a small change in the header liquid file or menu styles can break the hover behavior.

If you share the store URL or the CSS changes you made recently, I can help narrow down the exact line causing it.

7

OMG you are genius. thank you!

8

Nobody is genius. It is just result of hard work for a long time.

Thanks,

And please mark it as solution as a token of your appreciation