Change underline hover effect on main menu to another effect - Dawn theme

Store Design
, , ,

Topic summary

A user sought to replace the default underline hover effect on their Dawn theme’s main menu with a different animation style.

Solution Provided:

  • Custom CSS code was shared to implement a new hover effect
  • The code modifies .header__menu-item span elements with transition animations
  • Implementation requires adding the CSS to the assets/base.css file via Theme Editor

Key CSS Properties:

  • Creates an animated underline effect using :after pseudo-elements
  • Includes width and position transitions (0.3s ease timing)
  • Uses absolute positioning with a 2px height element

Outcome:
The solution was successfully implemented and the user confirmed satisfaction with the result. The discussion is resolved.

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

Hi

I want to change the menu hover effect into another effect.

Can this be fixed on my page?

www.dekanten.no

I will sure thank you all and accept solutions fast they working like a charm. :slightly_smiling_face:

See link: I want this effect instead.

https://codepen.io/jstn/pen/mdoOZJ

1 Like
2

Hi @Dekanten

To try this code, follow these steps:

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/base.css and paste the code below at the bottom of the file."
.header__menu-item span:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.header__menu-item:hover span:after {
width: 100%;
left: 0;
}
1 Like
3

Hey hey, first of all thank u so much for helping me out. This was amazing, glad to see the result being what i wish for. Thank u thank u so much again for this. :slightly_smiling_face: Love it. :slightly_smiling_face:

1 Like
4

Hi @Dekanten

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the solution. Thank you!

1 Like