Remove Underline Hover Effect in Navigation, Product Titles and Footer

Store Design
1

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.

2

@shehnaz17

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

Yours faithfully!

3

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

4

@shehnaz17 send me store password.

5

The store is not password protected.

6

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

@shehnaz17 I 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

8

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:

shehnaz17_0-1653723483027.jpeg
shehnaz17_0-1653723483027.jpeg3024Ă—4032 3.8 MB

shehnaz17_1-1653723551614.jpeg
shehnaz17_1-1653723551614.jpeg3024Ă—4032 2.88 MB

9

@DelightCart It 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;
}
10

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

11

@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;
}
12

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

13

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

14

Hey,

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