Remove Underline Hover Effect in Navigation, Product Titles and Footer

[shehnaz17]

Can anyone advise how to remove the underlines when hovering over links in the header, footer and product titles of the dawn theme?  I have tried all the possible solutions available in Shopify discussion threads, but nothing is working out. 

@oscprofessional Appreciate your thoughts and suggestions.

[DelightCart]

@shehnaz17 

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

[shehnaz17]

Sure, here it is: https://support-5156.myshopify.com/

[DelightCart]

@shehnaz17 send me store password.

[shehnaz17]

The store is not password protected.

[DelightCart]

@shehnaz17 

Please follow up below steps. May this help you.

Top Navigation:

1. Go to online store > themes > actions > edit code
2. Find Assets > base.css and paste below CSS at the bottom of the file

.header__active-menu-item
{
text-decoration: none !important;
}

Footer Navigation:

1. Go to online store > themes > actions > edit code
2. Find Assets > component-list-menu.css and paste below CSS at the bottom of the file

.list-menu__item--active
{
text-decoration: none !important;
}

Product Title:

1. Go to online store > themes > actions > edit code
2. Find Assets > base.css and paste below CSS at the bottom of the file

.full-unstyled-link
{
text-decoration: none !important;
}

[shehnaz17]

Hi,

Thank you for the solutions. However, I can still see underline on navigation links and the product titles as you can see in below images:

[SocialAutoPost · Accepted solution]

@shehnaz17I was able to see underline on the collection page over hover.

Here is the CSS you can try for the collection page :

.full-unstyled-link:hover {
  text-decoration: none !important;
}

Thanks

[SocialAutoPost]

@DelightCartIt is on hover so I think @shehnaz17 needs to use :hover to get rid of text-decoration

.header__active-menu-item:hover
{
text-decoration: none !important;
}

.list-menu__item--active:hover
{
text-decoration: none !important;
}

.full-unstyled-link:hover{
  text-decoration: none !important;
}

[shehnaz17]

@SocialAutoPost  Thank you for the solution for collection page. However, for navigation - About Us, Ready-to-wear etc. I can still see underline on hover.

[SocialAutoPost]

@shehnaz17 

I would suggest you create a duplicate theme before you make more changes to the theme.

Try this CSS for navigation and header

.header__active-menu-item, .list-menu__item--active{
text-decoration: none !important;
}

.header__active-menu-item, .list-menu__item--active:hover {
  text-decoration: none !important;
}

span, svg:hover {
  text-decoration: none !important;
}

[shehnaz17]

Hey, this still don't work. I am trying this in base.css file, hope that's correct?

[SocialAutoPost]

@shehnaz17Yes base.css file is correct. I edited my previous answer. Please try that CSS and let me know

[shehnaz17]

Hey,

This didn't work out neither. Not very sure what's the issue.