How To Add Underline Effect To Dropdown Menu Text? (Dawn)

sunsets
Visitor
2 0 0

Hi, currently when I hover over my header items, a blue line transitions/appears:

sunsets_0-1710834169079.png

 

How can I make the Same blue line appear under the text in my Dropdown menu? For example, I would like the blue line to also appear under "Regular" & "Seasonal" when hovering over those words.

 

https://2837cc-90.myshopify.com/

pw: realpw

 

Thank you!

Replies 4 (4)

websensepro
Shopify Partner
1014 139 147

Hello @sunsets ,

Please try this code I hope this is work ,

Go to Shopify admin > themes > edit code > Base.css file

Now put this code at the bottom of the base.css  file

 

 

  .header_submenu a{
    height: 2px;
    width: 0;
    background-color: blue;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width .25s;

}

 

save changes.

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

ThePrimeWeb
Shopify Partner
1852 523 401

Hey @sunsets,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.header__submenu a {
    position: relative !important;
}

.header__submenu a:after {
    content: '' !important;
    height: 2px !important;
    width: 0 !important;
    background-color: blue !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    -webkit-transition: width .25s !important;
    transition: width .25s !important;
}

.header__submenu a:hover:after {
    width: 40% !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710837415751.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

PageFly-Theodor
Globetrotter
518 70 78

Hi @sunsets 


This is Theodore from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.header__submenu li:hover {
    text-decoration: underline;
}
</style>

Hope this can help you solve the issue

 

Best regards,

Theodore | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Ihor-Sh
Shopify Partner
55 7 15

Hi @sunsets 
to make it work same as above - you need to rebuild liquid template first. you current submenu width depend on <a> tag inside. so first you need to wrap text inside <a> in a <span> for example, then you can apply to this span @ThePrimeWeb code example by adding span everywhere, like .header__submenu a span {}, .header__submenu a:after span {}, .header__submenu a:hover span::after {}

Shopify troubleshootibility 😉