Solved

How can I remove the underline on hover from header and footer links?

blakelyhi
Explorer
90 0 4

I have changed my navigation dropdown links to no longer show an underline on hover and I would like to emulate this same design for the header/main nav as well as the footer links. Any help targeting these would be appreciated. Site url: https://afca7f-2.myshopify.com/

 

This is the css I used to target the dropdown links:

.meganav__inner .meganav__primary .meganav__nav h4 {
    color: #8c8c8c;
  font-size: 14px !important;
}
.meganav__nav a:hover {
    color: #191919 !important;
    text-decoration: unset !important;
  font-size: 14px !important;
}

 

Accepted Solution (1)

theycallmemakka
Shopify Partner
1532 346 371

This is an accepted solution.

Hi @blakelyhi ,

 

You can use bellow CSS to remove underline from the footer links.

.footer__links a {
    text-decoration: none!important;
}

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1532 346 371

This is an accepted solution.

Hi @blakelyhi ,

 

You can use bellow CSS to remove underline from the footer links.

.footer__links a {
    text-decoration: none!important;
}

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

blakelyhi
Explorer
90 0 4

Thank you! What would remove the underline on hover with the main nav links (Goods, Explore, Reroute)? 

blakelyhi
Explorer
90 0 4

Hi again, I would love to remove the underline on hover for the main nav links in header (Goods, Explore, ReRoute), can you help target that as well? 

theycallmemakka
Shopify Partner
1532 346 371

Hi @blakelyhi ,

 

The below css will remove hover underline from the header menu items.

.header__links.header__links-primary > ul > li > [data-link] .link-hover::before {
    display: none;
}

 

If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com