Hello! I’d like to add an underline animation on my header like the one on this site.
My site is: https://prestigestraps.com/ ; password: asd321
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.cssfile - 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.
Follow step by step below:
- Select “Edit Code”
- Find file called “base.css”
- 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%;
}
- 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.