How to add underline to the mega menu text

Store Design

Topic summary

A store owner wants to add an underline hover effect to subheadings in their mega menu navigation. After initially encountering a password-protected store, they provided access credentials (store: ravenwoodstore, password: moths).

Solution provided:

  • Navigate to Online Store → Themes → Edit code
  • Open the theme.liquid file
  • Insert custom CSS code before the </head> tag
  • Save changes

The CSS code targets mega menu headings to display an underline on hover. Multiple community members offered similar solutions, with slight variations in code placement (before </head> vs. before </body>). The original poster confirmed the solution worked and thanked responders for their quick help.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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)

Ravenwoodstore_0-1727099125408.png
Ravenwoodstore_0-1727099125408.png578×305 3.73 KB

Thanks!

2 Likes
2

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

3

Hi @Ravenwoodstore Please provide the store url ?

4

Hi @Ravenwoodstore

Your store is password protected.

5

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

6

Sorry guys:

store: ravenwood.store

password: moths

1 Like
7

Sorry guys!

store: ravenwood.store

password: moths

1 Like
8
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1727106217641.png
BSSTekLabs_0-1727106217641.png393×303 3.48 KB

BSSTekLabs_1-1727106224440.png
BSSTekLabs_1-1727106224440.png473×238 3.03 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
9

Excellent! Thank you for the swift reply.

1 Like
10

Glad to help you. Have a good day.

11

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 tag and paste the code below before the tag.

And Save.

Result:

Made4uoRibe_0-1727107305088.png
Made4uoRibe_0-1727107305088.png345×280 20.9 KB

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