Hi,
i would like to change the color of the submenu into black, but when i do that, the whole menu is getting black. The submenu should be black and the menu white. How can i do it? Can somebody help maybe?
Topic summary
A user seeks help changing submenu text color to black while keeping the main menu white in their Shopify store. When attempting this change, the entire menu turns black instead of just the submenu.
Solutions Provided:
- Two support responders offered CSS code snippets to add to the base.css file (Online Store → Themes → Edit code → assets → base.css)
- Both solutions target specific menu elements to apply black color only to submenu items
Follow-up Issues:
- User successfully implemented the fix and requested additional help with:
- Adding hover color effects to the submenu
- Adding hover effects to sub-sub menus
- Fixing an issue where the wishlist icon/product appears in front of the menu, blocking menu interaction on the collections page
Status: Initial problem resolved. Additional CSS code provided for hover effects (pink background color example). The wishlist/product overlap issue remains unaddressed in the conversation.
@LinisCandy
Put below css into base.css file (Online store->themes->Edit code->assets->base.css)
summary.header__menu-item.link.link--text.list-menu__item.focus-inset.caption-large span {
color: black !important;
}
Hello @LinisCandy
It’s GemPages support team and glad to support you today.
You can follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your base.css file and paste the following code below:
.header__menu-item[aria-controls="HeaderMenu-SubMenuList-12"] span{
color: #000;
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
many many thanks! One more thing: how can i add a hover color? 
thanks! This one also works
One more thing: how can i add a hover color?
@LinisCandy
For that add below code in base.css file
a.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large:hover {
background-color: pink !important;
}
1 Like
many many thanks!
and two more things, maybe you can help me too!
how can i add also a hover for the sub sub menu?
And if you go on this site: https://linis-candy.myshopify.com/collections/alle-produkte
the wishlist icon or the product is in front of the menu and you cant click on the menu, Do you know how to change that?
