How to change the underline on hover and active main navigation items - dawn theme

Store Design

Topic summary

Goal: Offset and align the underline for hover and active main menu items in the Dawn theme with the bottom of the header panel (like the referenced example site).

Key changes implemented (Assets/base.css.liquid):

  • Replace default text-decoration underline with a positioned pseudo-element underline: use :after on menu item spans to draw a 2px bottom border, and adjust padding to align the line with the header bottom. Submenu items are excluded from this effect. Spacing between logo and menu was reduced by zeroing list item and header paddings/margins.

Fixes and outcomes:

  • Hover vs active width mismatch: change selector to target .header__menu-item:hover span:after so hover and active underlines match in width.
  • Keep “SHOP” marked active on product/collection pages: add a conditional block in Layouts/theme.liquid (if template.name is collection or product) injecting CSS that underlines the first top-level menu item; the initial if condition was corrected and then confirmed working by the requester.
  • Remove click-state doubling/wider line: disable the :active border via .header__menu-item:active { border-bottom: none !important; }.

Status: Original requester’s needs are largely addressed. New, separate queries (keeping active item red/underlined on another site; removing mistakenly inserted code showing in the footer with images attached) remain unanswered in this thread.

Summarized with AI on December 30. AI used: gpt-5.
6

Thanks so much. Almost there.

  1. Point 2 didn’t seem to work. i inserted the code but can’t see any change. any other ideas?
  2. how do i get rid of the click state for the menu items (currently when you click on the menu item, the line underneath goes wider and offset, i just want it to be the same as the active state in look and feel when you click)

Cheers

1 Like