How to add underline to the mega menu text

[Ravenwoodstore]

Hi guys,

How can I add an underline effect to each subheading in the mega menu? 

See image below for where I want the text to be underlined when you hover over it with the mouse.(Every heading on all of the menu)

Thanks!

[websensepro]

Hi @Ravenwoodstore , kindly provide your store URL please. Thanks

[Ravenwoodstore]

Sorry guys!

store: ravenwood.store

password: moths

[Sam416]

Hi @Ravenwoodstore Please provide the store url ?

[Made4uo-Ribe]

Hi @Ravenwoodstore 

Your store is password protected. 

[BSS-TekLabs]

Hello @Ravenwoodstore 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[Ravenwoodstore]

Sorry guys:

store: ravenwood.store

password: moths

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Ravenwoodstore 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.mega-menu__link:hover {
    text-decoration: underline !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Ravenwoodstore]

Excellent! Thank you for the swift reply. 

[BSS-TekLabs]

Glad to help you. Have a good day.

[Made4uo-Ribe]

Thanks for the info, check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.mega-menu li:hover > .mega-menu__link {
    border-bottom: 1px solid;
    border-color: rgb(var(--color-foreground));
    padding-bottom: 0; 
    display: inline-block;
}
</style>

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!