Solved

Remove Underline Hover Effect in Navigation, Product Titles and Footer

shehnaz17
Excursionist
15 0 7

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.

Accepted Solution (1)

SocialAutoPost
Shopify Partner
434 59 105

This is an 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

 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

View solution in original post

Replies 13 (13)

DelightCart
Shopify Partner
1239 82 157

@shehnaz17 

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

Yours faithfully!

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
shehnaz17
Excursionist
15 0 7
DelightCart
Shopify Partner
1239 82 157

@shehnaz17 send me store password.

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
shehnaz17
Excursionist
15 0 7

The store is not password protected.

DelightCart
Shopify Partner
1239 82 157

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

 

 

 

 

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
shehnaz17
Excursionist
15 0 7

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.jpegshehnaz17_1-1653723551614.jpeg

 

SocialAutoPost
Shopify Partner
434 59 105

This is an 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

 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
SocialAutoPost
Shopify Partner
434 59 105

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

 

 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
shehnaz17
Excursionist
15 0 7

@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
Shopify Partner
434 59 105

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

 

 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
shehnaz17
Excursionist
15 0 7

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

SocialAutoPost
Shopify Partner
434 59 105

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

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
shehnaz17
Excursionist
15 0 7

Hey,

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