Copying same footer menu style to header menu | Dawn theme

Store Design
, , ,

Topic summary

A user seeks to replicate the footer menu’s hover effect on the header menu of their Dawn theme Shopify store, replacing the default underline style.

Initial Solution Provided:

  • Add custom CSS code to the theme.liquid file (before tag)
  • Code targets header menu hover effects to match footer styling

Follow-up Issue:
After implementing the solution, the user identified that submenu items still display an underline effect when active.

Status:
A solution for removing the submenu underline was offered via additional CSS code, but the conversation appears incomplete. The discussion includes code snippets and screenshots demonstrating the desired vs. current styling, though specific CSS implementations are partially obscured in the provided text.

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

looking to copy the same menu links footer style (hovering effect)

to replace the underline effect in header menu

thanks in advance!

website - https://the-style-luxe.myshopify.com/

password - reucho

hasanali1_0-1679244326549.png
hasanali1_0-1679244326549.png1453×495 19.2 KB

hasanali1_1-1679244381405.png
hasanali1_1-1679244381405.png1390×228 12.7 KB

2

Hi @hasanali1 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for the 1 solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

thank you so much!!

4

one more thing, the submenu active effect is underlined

can we get rid of it ?

hasanali1_0-1679246260606.png
hasanali1_0-1679246260606.png1204×643 60.4 KB

5

You can add this code to theme.liquid:
1 Like