Solved

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

justauser
Pathfinder
145 0 31

Please refer to the picture down below:

Screenshot (168).png

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!

 

Accepted Solutions (2)

techlyser_web
Shopify Partner
1364 254 265

This is an accepted solution.

@justauser 

 

Please add the below code above </body> in theme.liquid

 

layout >> theme.liquid

 

<style>
.header__inline-menu .header__submenu a.header__menu-item:hover {
text-decoration: underline!important;
}
</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

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 </body>

 

<style>

.header__inline-menu .header__submenu a.header__menu-item:hover {

text-decoration: underline;

}

</style>


Hope this answer helps.

Best regards,

Victor | PageFly

View solution in original post

Replies 3 (3)

techlyser_web
Shopify Partner
1364 254 265

This is an accepted solution.

@justauser 

 

Please add the below code above </body> in theme.liquid

 

layout >> theme.liquid

 

<style>
.header__inline-menu .header__submenu a.header__menu-item:hover {
text-decoration: underline!important;
}
</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Victor
Shopify Partner
7865 1785 3050

This is an accepted solution.

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 </body>

 

<style>

.header__inline-menu .header__submenu a.header__menu-item:hover {

text-decoration: underline;

}

</style>


Hope this answer helps.

Best regards,

Victor | PageFly

EcomGraduates
Shopify Partner
588 48 77

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; }