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

Store Design
2

@annabelleg21
Hii,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid

.header__menu-item:active {
  border-bottom: 2px solid #000;
}
.header__menu-item:hover {
  color: rgb(var(--color-foreground));
  border-bottom: 2px solid #000;
}

remove this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid

.header__menu-item:hover span {
	text-decoration: underline;
	text-underline-offset: .3rem;
}
1 Like