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.
7

Hello @annabelleg21 ,

Greetings!!

My mistake
Can you please again paste this code as instructions

This code for, “Is there a way I can get the SHOP Menu item to remain active when clicking through to a product? at the moment it disappears”

Ans:

Online Store->Theme->Edit code->Layouts->theme.liquid and Add this code at the bottom of file

{% if template.name == 'collection' or template.name == 'product' %}
<style>
.list-menu.list-menu--inline>li:first-child span {
position: relative;
}

.list-menu.list-menu--inline>li:first-child span:after{
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration: none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
</style>
{% endif %}