Remove text-decoration on submenu hover + active section

[Jankko]

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.


Thank you,
Jan

[Jankko]

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

[Anshul_arora · 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.

[Jankko]

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]

Hello @Jankko ,

Yes, you're right.

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

It will be highly appreciated.

Thank you.

[ZestardTech]

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