How to do I add an underline on hover for the dropdown list items? DAWN THEME

Store Design
, , , ,
1

Please refer to the picture down below:

Screenshot (168).png
Screenshot (168).png1867×881 152 KB

For example when the mouse is over on the “Colored-Gemstones” submenu in the “SHOP” dropdown then there should be an underline appearing under the “Colored-Gemstones” text, how can I achieve this?

URL:https://abbasigems.com/

Password: testingpage

Thank you, Any sources or help are much appreciated!

2

@justauser

Please add the below code above in theme.liquid

layout >> theme.liquid

.header__inline-menu .header__submenu a.header__menu-item:hover { text-decoration: underline!important; }
3

Hi @justauser

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hello there

  1. Find the code for the dropdown list: In your Shopify admin, go to Online Store > Themes > Actions > Edit code. Locate the snippet that displays the dropdown list in the header, usually called “header.liquid” or “header-desktop.liquid.”

  2. Add the CSS code: In the stylesheet file, add the following CSS code to create an underline on hover for the dropdown list items:

.header-nav__item:hover .header-nav__dropdown-link { text-decoration: underline; }