Header menus style

Store Design
, , , , ,

Topic summary

A user wants to customize dropdown menus (“Watches” and “More”) to match the styling of their currency menu: white background with black text and a shadow effect on hover.

Solutions Provided:

Two contributors offered similar CSS-based solutions:

  • Navigate to: Online Store → Themes → Actions → Edit Code → base.css
  • Add CSS code targeting .header__submenu and .header__menu-item classes
  • Key properties: white background, black text (#000), and gray background on hover

Issue Encountered:

The original poster reported that hovering over one menu item changes the background of the entire menu instead of just the individual item. They also asked about removing spacing.

Latest Fix:

A refined CSS snippet was provided targeting .header__submenu .header__menu-item:hover with a specific background color (#c8c8c8) to address the hover issue affecting individual items rather than the whole menu.

Status: Awaiting confirmation if the latest solution resolves the hover behavior problem.

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

Hello, I want to make the dropdown-menus Watches and More to be displayed like the currency Menu shown on the picture. I want them to have white background with black letters and when I hover to have shadow effect.
Thank you in advance!

PabloPier_0-1719660909890.png
PabloPier_0-1719660909890.png842×247 12.2 KB

PabloPier_1-1719660925507.png
PabloPier_1-1719660925507.png968×617 51.6 KB

PabloPier_2-1719661122910.png
PabloPier_2-1719661122910.png316×308 16.4 KB

2

@PabloPier

  • Here is the solution for you
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.header__submenu .header__menu-item {
    color: #000 !important;
    border-bottom: 1px solid black !important;
}
.js details>.header__submenu {
 background: white !important;
}
.js details>.header__submenu:hover {
  background: gray!important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719662203800.png
BSSTekLabs_0-1719662203800.png1863×518 72.4 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Hello @PabloPier
Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
add this code at the very end of the file.

.js details>.header__submenu {
 background: white !important;
}
.js details>.header__submenu:hover {
  background: gray!important;
}
.header__submenu .header__menu-item {
    color: #000 !important;    
}

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like
4

Hi, thank you for the reply but when I hover the background is changed on all the tabs:

PabloPier_0-1719663049710.png
PabloPier_0-1719663049710.png1036×662 50.3 KB

And also can we remove the space?

PabloPier_1-1719663084575.png
PabloPier_1-1719663084575.png241×214 3.84 KB

5

Hi, when I hover over one tab the background is changed on the whole menu

PabloPier_0-1719663412004.png
PabloPier_0-1719663412004.png1002×617 46.6 KB

6 
.header__submenu .header__menu-item {
    color: #000 !important;
}
.js details>.header__submenu {
 background: white !important;
}
.header__submenu .header__menu-item:hover {
  background: gray!important;
}

@PabloPier can you try it

1 Like
7

Please add this code

.header__submenu .header__menu-item:hover {   
    background-color: #c8c8c8 !important;
}

let me know if this works.

1 Like