Change the underline of items in the main menu when hovering and for active items (Dawn 12.0.0)

Store Design
, , , ,
1

Hello everyone!

I’m using the Dawn 12.0.0 theme and would like to change the underlining of items in the main menu of my site when hovering and for active items:

  1. Make the underline bolder/thicker, move it down a little bit, and change its color to #FFF2D7.

  2. Change the animation of the underline so that it appears smoothly… something like the way this underline appears here in the menu when you scroll down the page (I’ve marked on the screenshot below what I mean): https://www.etsy.com/shop/DRAWandCARE#reviews

My website link: https://www.drawandcare.com/

Will be grateful for any help!

menu items.png
menu items.png1863×1716 381 KB

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Bottom of the file:
.header__menu-item:hover span{
text-decoration-color: #FFF2D7;
text-decoration-thickness: 5px;
}
.header__menu-item span{
text-decoration-thickness: 5px;
text-decoration-color: #FFF2D7;
}
details[open]>.header__menu-item{
text-decoration-thickness: 5px;
text-decoration-color: #FFF2D7;
}
.header__submenu .header__menu-item:hover{
text-decoration-thickness: 5px;
text-decoration-color: #FFF2D7;
}

ZestardTech_0-1700199637661.png
ZestardTech_0-1700199637661.png1657×331 198 KB

2 Likes
3

Thank you very much, it worked great!

Can we fix just one more thing: when one of the pages from the “sub-items” menu is active, its underline is still black. When on hover, it turns yellow, as it should.

Thank you!

subitem.png
subitem.png3312×1137 500 KB

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the Bottom of the file:
.header__submenu .header__menu-item {
text-decoration-thickness: 3.5px;
text-decoration-color: #fff2d7;
text-underline-offset: 5px!important;
}

ZestardTech_0-1700542207232.png
ZestardTech_0-1700542207232.png1747×351 78.8 KB

1 Like
5

It worked perfectly, thanks SO MUCH for your help!

1 Like
6

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

1 Like
7

Hello, thank you!

Can I ask for help with one more thing? (the last one, I believe :sweat_smile: )

How can I make the font of the active submenu page/item bold, while the inactive ones remain normal?

Thanks in advance again! You’re doing an AMAZING job!

https://www.drawandcare.com

example.png
example.png3339×1776 670 KB