Copying same footer menu style to header menu | Dawn theme

[hasanali1]

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

[PageFly-Victor · Accepted solution]

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 </body> :

<style>
a.header__menu-item.list-menu__item.link.link--text.focus-inset:hover > span {
    text-decoration: unset ;
}

summary.header__menu-item.list-menu__item.link.focus-inset:hover > span {
    text-decoration: unset !important;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large:hover {
    color: white !important
}
main#MainContent {
    z-index: 1;
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[hasanali1]

thank you so much!!

[hasanali1]

one more thing, the submenu active effect is underlined

can we get rid of it ?

[PageFly-Victor]

You can add this code to theme.liquid:

<style>
a.header__menu-item.list-menu__item.link.link--text.focus-inset.caption-large {
    text-decoration: unset;
}
details[open]>.header__menu-item {
    text-decoration: unset !important;
}
</style>