Shopify themes, liquid, logos, and UX
Hello
I want my dropdown menus also hover a background color as my main menu.
Currently only the Text Color changes, but I want a rectangular colored box on hovering dropdown menu.
I want to hover my dropdown menu like this -
Sorry for bad English, I hope I manage to make you understand what I need.
Website link: www.modfashiongs.uk
Thank you.
Solved! Go to the solution
This is an accepted solution.
Please try this css
.dropdown{
padding: 0 !important;
}
.dropdown .dropdown__menuitem:hover {
background-color: #2f2f29 !important;
color: #fff !important;
}
Change color code a/to your need.
Thanks
Hello @GiasUddin ,
Follow these steps:
1. Go to Online Store -> Theme -> Edit code
2. Open your stylesheet.css file and paste the following code at the bottom:
.dropdown {
background-color: var(--nav-background-color);
}
Thanks
I'm sorry it didn't work.
I want to fill the red marked area with different color when I hover my curser on it.
This is an accepted solution.
Please try this css
.dropdown{
padding: 0 !important;
}
.dropdown .dropdown__menuitem:hover {
background-color: #2f2f29 !important;
color: #fff !important;
}
Change color code a/to your need.
Thanks
You're a saver. Thank you!!
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025