How can I Add an underline to these navigation tabs when hovering/clicking on it ?

gp11
Visitor
3 0 1

Screenshot 2024-03-26 at 2.49.05 PM.pngI would like the tabs "trending, new arrivals" etc to be underlined when it is active or when I am hovering over it.  Store link : https://woodinspire.in 

 

Replies 3 (3)

PageFly-Theodor
Navigator
474 64 74

Hi @gp11 


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>
.tt-tabs-default li > a:hover, .tt-tabs-default li > a.active{
   text-decoration: underline !important;
}
</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.

gp11
Visitor
3 0 1

can I increase padding as well? some space between the text and the line?

websensepro
Shopify Partner
1011 139 147

Hello @gp11,

 

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code to the bottom of the file

 

a.nav-link.active.show{
 border-bottom: 2px solid #796053;
}

 

 

Thanks

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