Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

How to remove underline when hover on the menu with dropdown

How to remove underline when hover on the menu with dropdown

Lanlanzzz
New Member
5 0 0

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

Replies 9 (9)

SomeUsernameHe
Shopify Partner
522 58 115

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

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Lanlanzzz
New Member
5 0 0
SomeUsernameHe
Shopify Partner
522 58 115

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

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Lanlanzzz
New Member
5 0 0

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

SomeUsernameHe
Shopify Partner
522 58 115

You can use the following css:

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

ul#HeaderMenu-MenuList-3 {
    text-decoration: none;
}
Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee
Lanlanzzz
New Member
5 0 0

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;}

 

PageFly-Richard
Shopify Partner
5011 1120 1805

 

Hi @Lanlanzzz 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.header__menu-item:hover {
    text-decoration: none!important;
}
.list-menu__item {
    text-decoration: none;
}
</style>

PageFlyRichard_0-1705454160142.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

Lanlanzzz
New Member
5 0 0

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

PageFly-Richard
Shopify Partner
5011 1120 1805

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

<style>
nav.header__inline-menu * {
    text-decoration: none !important;
}
nav.header__inline-menu *:hover {
    text-decoration: none !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.