how to underline the text instead of making it white

Store Design
, , , ,

Topic summary

A user seeks to modify their website menu styling, specifically wanting to underline menu text instead of changing it to white (since the background is already white). They also want the header to turn white only on hover.

Solutions Provided:

  • Two community members offered CSS code snippets to add to the theme files
  • One solution targets the base.css file with hover effects for menu links
  • Another suggests using Custom CSS in Theme Settings to change header background to white on hover and adjust text colors

Follow-up Request:

  • The initial solution worked, but the user now wants:
    • Underline to appear only on hover (not permanently)
    • Larger hover box area
    • Logo to turn black on header hover (currently white logo would disappear against white background)

Status: Discussion remains open with the user awaiting refinements to the CSS code to address these additional styling requirements.

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

HI @christian_russo

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
x-header.header:hover {
    background: white !important;
}
x-header.header:hover * {
    color: black !important;
    fill: black !important;
}
ul.header__dropdown-menu > li {
    text-decoration: underline !important;
}

Here is the result: https://prnt.sc/Kpu54I2OSHbh ; https://prnt.sc/cHmPhEzg4PWR

Please note that if you change the header to white color, the logo will be gone as the logo is white image

I hope this helps

Best,

Tiana