Hello @annabelleg21 ,
Greetings!!
Add this CSS for 2nd point
Online Store->Theme->Edit code->Assets->base.css.liquid and find this line
.header__menu-item:active {border-bottom: none !important;}
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.
1 Like