How to remove underline when hover on the menu with dropdown

Technical Q&A
,

Topic summary

Goal: remove the underline on hover for main menu and submenu items in a Shopify theme.

  • Access: A helper requested the store URL; the password was removed so they could inspect it.

  • Initial fix: CSS was suggested to disable text-decoration on hover (e.g., .header__menu-item:hover { text-decoration: none !important; } and a rule for a specific menu list ID).

  • Attempts: The requester added multiple CSS rules in base.css (covering hover, active states, spans, submenu items, and a :before element) but the underline persisted.

  • Alternative approach: Another helper advised pasting CSS into theme.liquid above , with a screenshot guiding where to place it. The requester reported it still did not work.

  • Latest update: The helper provided a revised code snippet to replace the earlier one, but the exact code content is not visible in the transcript.

Status: Unresolved and ongoing. Next step depends on testing the revised snippet and possibly identifying the correct selector/override within the theme (theme.liquid or CSS) to suppress text-decoration on hover for all menu levels.

Summarized with AI on January 8. AI used: gpt-5.
1

Hi there! I’m wondering how to remove the underline effect when hover on the menu and the submenu item.. I hope there is no underline at all. Thanks in advance.

Screen Shot 2024-01-16 at 00.13.34.png
Screen Shot 2024-01-16 at 00.13.34.png552×110 27.3 KB

2

Is it possible to get your store URL to inspect it?

3

yes sure! https://7d0294-2.myshopify.com/?_ab=0&_fd=0&_sc=1

4

It does look like it’s password protected, so we would need your store preview password.

5

https://7d0294-2.myshopify.com/ I removed the password! Thank you for telling me this.

6

You can use the following css:

.header__menu-item:hover {
    text-decoration: none !important;
}

ul#HeaderMenu-MenuList-3 {
    text-decoration: none;
}
7

I’ve added all these codes in the base.css file. but still wouldn’t work. Could you take a look?

.header__menu-item:hover {
text-decoration: none !important;
}

ul#HeaderMenu-MenuList-3 {
text-decoration: none;
}

.header__active-menu-item {
text-decoration: none;
}

.header__menu-item:hover span {
text-decoration: none;
}
.header__menu-item:hover span, .header__active-menu-item {
text-decoration: none;
}

.header__submenu .header__menu-item:hover {
text-decoration-line: none !important;
}
.header__submenu .header__menu-item:before {
background: transparent !important;
}

.header__menu-item .header__active-menu-item {
text-decoration: none;
}

.header__menu-item span {text-decoration: none;}

.header__menu-item span {
text-decoration: none;
}
.header__menu-item span{text-decoration: none !important;}

8

Hi @Lanlanzzz

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1705454160142.png
PageFlyRichard_0-1705454160142.png1455×953 109 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

9

Thank you. After I copy and paste your codes, it still not working:(

10

Hi @Lanlanzzz Please replace the code you added with this new one