How to animate underline on header? Dawn theme

Store Design

Topic summary

A user seeks to add an animated underline effect to header menu items in the Dawn theme, similar to an example site where underlines smoothly appear on hover.

Initial Confusion:

  • Early responses misunderstood the request, providing solutions for static borders or sticky headers instead of hover animations.

Working Solution:
A CSS code snippet was provided that creates the desired effect:

  • Adds a pseudo-element (::after) to menu items
  • Animates the underline width from 0 to 100% on hover using CSS transitions
  • Uses absolute positioning to place the underline at the bottom of menu items

Refinement:
The user requested removal of the animation from dropdown/subcategory items. The solution was updated to:

  • Target only top-level menu items (.header__menu-item)
  • Hide the underline effect on submenu items using display: none

Status: Resolved. The user confirmed both the main animation and subcategory exclusion work as intended.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I was wondering how I am able to animate the underline when hovering over header titles. This site - https://spraynprayclo.com/collections/best-sellers has what I am talking about and it looks really good! Is this simple to do?

My site: https://qz26pn-cv.myshopify.com/

Password: bagono

Thanks in advance!

1 Like
2

Hi @GoombaGrows

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-social.header--has-account {
    border-bottom: .1rem solid rgba(18, 18, 18, .08) !important;
    margin-bottom: 20px !important;
}

Result

LizHoang_0-1740371785294.png
LizHoang_0-1740371785294.png1187Ă—320 166 KB

Best

Liz

3

Hello,

Thank you so much for the quick response! However, I dont think I did a great job at explaining what I was looking for. I will attach a screenshot.

GoombaGrows_0-1740372654160.png

The underline that appears when hovering over their titles are animated. Are you able to help me with this?

4

Steps to Enable Sticky Header in Dawn:

  1. Access the Theme Editor:

    • In the Shopify admin, go to “Online Store” > “Themes”.
    • Find the Dawn theme and click “Customize”.

  2. Navigate to Theme Settings:

    • In the theme editor’s left-hand sidebar, click “Theme settings”.

  3. Find the Header Settings:

    • Within “Theme settings”, look for the “Header” section and click on it.

  4. Enable Sticky Header:

    • In the “Header” section, you’ll find a checkbox or toggle labeled “Enable sticky header”.
    • Check the box or toggle the switch to enable the sticky header.

  5. Save Changes:

    • Click the “Save” button in the top-right corner of the theme editor.

You can get border and also same as your given link.

5

Hi @GoombaGrows , Go to base.css and add the following code :

.list-menu__item{
  position: relative;
}

.list-menu__item:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    height: 3px;
    width: 0;
    background-color: black;
    transition: width .2s;
}

.list-menu__item:hover::after{
  width:100%
}

This will create the desired underline animation when you hover.

1 Like
6

This worked perfectly! Now I need to figure out how to make the quick link titles bigger to fit it lol. Thank you :slightly_smiling_face:

7

One other question actually, am I able to remove the animation from the sub categories?

8

GoombaGrows_0-1740373832193.png
GoombaGrows_0-1740373832193.png331Ă—250 33.1 KB

Like remove the underline from these? Thank you in advance!

9

@GoombaGrows , Remove the previous code and add this instead :

.header__menu-item {
  position: relative;
}

.header__menu-item::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  height: 3px;
  width: 0;
  background-color: black;
  transition: width .2s;
}

.header__menu-item:hover::after {
  width: 100%;
}

.header__submenu .header__menu-item::after {
  display: none;
}
1 Like
10

That worked!! You are amazing! Thank you again :slightly_smiling_face:

11

@GoombaGrows ,
You’re very welcome! If you ever need any help, feel free to reach out anytime.