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

2 0 0

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



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.

pw: realpw


Thank you!

Replies 4 (4)

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

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.

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


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



Was I helpful?

Buy me a coffee


Need help with your store? or check out the website
Check out our interview with Shopify!

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>

.header__submenu li:hover {
    text-decoration: underline;

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.

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 😉