submenu on header

Shopify Discussion

Topic summary

A Shopify store owner using the Impulse theme needed help changing submenu text colors in their header navigation. The white submenu text under “Customer Service” was difficult to read and only turned black on hover.

Solutions Provided:

The issue was resolved through custom CSS code added to the theme files (theme.css or styles.css via Edit Code). The helper provided CSS to:

  • Change submenu text from white to black with optional background color modifications
  • Update sale tag background color from black to blue
  • Add a hover underline effect to submenu items for better user experience

Implementation Steps:

  1. Navigate to Online Store > Themes > Actions > Edit code
  2. Locate the CSS file in Assets
  3. Paste provided CSS code at the bottom
  4. Save changes

The conversation included multiple iterations with visual examples (screenshots) to refine the styling. All solutions were successfully implemented, with the store owner confirming the final hover effect worked as intended.

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

Ecomowner_0-1738001059720.png
Ecomowner_0-1738001059720.png1514×218 9.54 KB

Does anyone how to change the color of submenu text? When I click on customer service the submenu’s below it are white I want to change the color to black. It only turns black when I hover over the submenu, I want it black all the time even when not hovering over it. I am using impulse theme.

2

please share your store url @Ecomowner

3
4

@Ecomowner You want like this

Ahmad31_0-1738002376024.png
Ahmad31_0-1738002376024.png327×151 12.6 KB

5

is there a way to change to background to black instead of white if not your solution is fine

6

yes there is way but i think its look better

7

ok the option you gave will be fine

8

@Ecomowner

  • From your Shopify Admin, go to Online Store > Themes.
  • Find your current theme (e.g., impulse) and click Actions > Edit code.
  • In the code editor, look for the CSS file, typically found in Assets (e.g., theme.css or styles.css).
  • Open the file and paste the code at the bottom.
  • Click Save.
.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
  background-color: black;
  color: white;
}
​
9

would you know how to change the sale tag background color , its currently black and I want it to be blue

10

yes sure i can help you @Ecomowner

Ahmad31_0-1738003542659.png
Ahmad31_0-1738003542659.png253×334 35 KB

also paste this css for this purpose:

.grid-product__tag.grid-product__tag--sale{
background-color: #3300ff;
}
11

Is there a way to have a line show up when you hover over the submenu?

12

like this @Ecomowner

Ahmad31_1-1738005480949.png
Ahmad31_1-1738005480949.png314×241 6.83 KB

use this css:

.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
  transition: border 0.3s ease;
}

.site-nav__dropdown-link.site-nav__dropdown-link--second-level:hover {
  border: 1px solid white; /* Adds a white border on hover */
}
.site-nav__dropdown.text-left{
padding-bottom: 0px;
}
13

I would just like a line so that customers know they are hovering over the correct submenu

14 
.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
  border: none; 
  transition: border-bottom 0.3s ease; 
}

.site-nav__dropdown-link.site-nav__dropdown-link--second-level:hover {
  border-bottom: 1px solid white; 
}
.site-nav__dropdown.text-left{
padding-bottom: 0px;
}

if you don’t want hover on the last child use the below css :

.site-nav__dropdown-link.site-nav__dropdown-link--second-level {
  border: none; 
  transition: border-bottom 0.3s ease; 
}

.site-nav__dropdown-link.site-nav__dropdown-link--second-level:hover {
  border-bottom: 1px solid white; 
}

.site-nav__dropdown-link.site-nav__dropdown-link--second-level:not(:last-child):hover {
  border-bottom: 1px solid white; 
}
.site-nav__dropdown.text-left{
padding-bottom: 0px;
}
15

Thanks it worked

16

You’re welcome, if the given solutions worked please like my answers to appreciate my work. @Ecomowner