Solved

Remove text-decoration on submenu hover + active section

Jankko
Shopify Partner
3 0 1

Hello,
I'm trying to customize the navbar in Dawn theme a bit with some CSS and I'm currently facing 2 problems.
I managed to customize the hover and active section of the standard links, but I have issues to do the same on the links with dropdown, as can be seen on screenshot below.

1st problem: I wanna get rid of the text-decoration when the section or any of the subsections is active.
2nd problem: i wanna get rid of the text-decoration when you hover over any of the subsection item (I managed to get rid of the text-decoration when you hover directly over the main link, but when hovering the sublinks it still creates the underscore)

Link to the eshop is https://7c6b10-4.myshopify.com/

Any help is appreciated.
shopifyScreenshot.png

Thank you,
Jan

Accepted Solution (1)

Anshul_arora
Navigator
416 119 83

This is an accepted solution.

Hello @Jankko ,

I understand you are looking to remove the underline on the navigation menu when users hover over submenu items or active page menu items.

To remove the underline, in the hover submenu case, you can use the below-mentioned code.

-> Add the code at the bottom of the theme.liquid file before </body> tag and save.

 

 

<style>

details[open] > .header__menu-item {
text-decoration: none !important;
}

</style>

 

 

In another issue, please use this code -

 

<style>
summary.list-menu__item a {
text-decoration: none !important;
}
</style>

 

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 5 (5)
Jankko
Shopify Partner
3 0 1

Hi Empres, alright, how are we going to do it? 😀

Anshul_arora
Navigator
416 119 83

This is an accepted solution.

Hello @Jankko ,

I understand you are looking to remove the underline on the navigation menu when users hover over submenu items or active page menu items.

To remove the underline, in the hover submenu case, you can use the below-mentioned code.

-> Add the code at the bottom of the theme.liquid file before </body> tag and save.

 

 

<style>

details[open] > .header__menu-item {
text-decoration: none !important;
}

</style>

 

 

In another issue, please use this code -

 

<style>
summary.list-menu__item a {
text-decoration: none !important;
}
</style>

 

I hope the code helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Jankko
Shopify Partner
3 0 1

Thank you Anshul, this actually worked, I didn't even need to use the !important tags as it seems as quite an overkill.

Anshul_arora
Navigator
416 119 83

Hello @Jankko ,

Yes, you're right.

Thank you for accepting my solution, please also liked by solution.

It will be highly appreciated.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

ZestardTech
Shopify Expert
5603 1019 1346

Hi @Jankko 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

summary.list-menu__item a {
text-decoration: none!important;
}
details[open] > .header__menu-item {
text-decoration: none !important;
}

 

ZestardTech_0-1716986103897.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing