Yeah, I still have. Check the first code that I give.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Topic summary
Main issue: change the dropdown menu styling—specifically make the dropdown (on hover) appear black with white text—while keeping the rest of the header white. The poster preferred to share the store URL privately.
Key steps suggested:
- Edit theme CSS (Online Store > Themes > Edit code > Assets: base.css/style.css/theme.css) and target .nav-dropdown:not([hidden]) to set background and text colors. Initial attempt using theme color variables produced no visible change.
- Refined approach: add CSS in the header’s Custom CSS area and use !important to override theme styles:
.nav-dropdown:not([hidden]) { background: black !important; color: white !important; }
Menu layout follow-up:
- To keep all top-level menu items on one line, set the header container to full width: store-header .header .container { max-width: 100%; } (shared with a screenshot via PM).
- Tweak menu readability/spacing: adjust link font size/letter-spacing and right margins between items.
Outcome: The thread ends with thanks; no explicit confirmation the fix worked, but the added !important and layout tweaks likely resolved the styling and alignment concerns. Discussion appears effectively resolved.
1 Like