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

Store Design
, ,
1

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

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

3

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

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?

5

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