Underline Animation On Header (Dawn Theme)

Topic summary

A user wants to add an underline hover animation to their Dawn theme header navigation, similar to an example site they referenced.

Solution Provided:

  • Access theme code editor and locate the base.css file
  • Add custom CSS at the end of the file that creates an animated underline effect on menu items
  • The CSS uses pseudo-elements (:after) with width transitions to create the animation
  • Save changes and refresh to see the effect

Outstanding Issue:

  • A follow-up question asks whether the same animation can be applied to submenu/dropdown items, as the provided code appears to only affect top-level menu items
  • This remains unanswered

Note: The conversation includes screenshots showing the code editor interface and where to paste the CSS snippet.

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

Hello! I’d like to add an underline animation on my header like the one on this site.

https://seven7watches.com

My site is: https://prestigestraps.com/ ; password: asd321

Follow step by step below:

  1. Select “Edit Code”

  1. Find file called “base.css”

  1. Paste code below in the end of “base.css” file and click “Save” button

.header__menu-item span{
text-decoration: unset !important;
position: relative;
}
.header__menu-item span:after{
content: '';
height: 2px;
width: 0;
background-color: currentColor;
position: absolute;
bottom: 0;
left: 0;
-webkit-transition: width .25s;
transition: width .25s;
}

.header__menu-item:hover span:after{
width: 100%;
}
  1. Refesh page and check result
4 Likes

Can you provide the same animation code for the submenu items ? looks like it doesn’t change the animation of underline on the drop-down menu list.