Remove underlines on header hover links (Debut theme)

Solved
Tinselworm
Excursionist
46 0 10

Can anyone advise how to remove the underlines when hovering over links in the header of the debut theme? I've tried the below code in theme.scss.liquid but it's not working correctly. The on hover colour is working as expected but something is overriding the on hover text-decoration: none styling. As such I'm getting an underline. 

 

header.site-header a:hover {
  color: #e9e9e9;
  text-decoration: none;	
}

Hello 

Add below css in theme.css

a.site-nav__link.site-nav__link--main .site-nav__label:hover {
 border-bottom: none;
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Tinselworm
Excursionist
46 0 10

Thanks Pallavi, that *kind of* works, when immediately hovering over the text the underline disappears but if hovering in the area of the menu item the underline is still visible. There's still something not quite right.

0 Likes

Can you please share your site URL

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Tinselworm
Excursionist
46 0 10

Hi again, sure, it's www.yoyelo.co.uk

0 Likes
.site-nav__link:hover span.site-nav__label {
 border-bottom: none;
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Tinselworm
Excursionist
46 0 10

Hi Pallavi,

 

Thank you again for this. That has worked, although I'm still left with a different coloured underline when the link is selected. See screenshot. Any idea how I can turn this white OR remove it? 

 

Screen Shot 2019-06-25 at 11.57.21.png

0 Likes

This is an accepted solution.

.site-nav__link--active .site-nav__label {
border-bottom: none;
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Tinselworm
Excursionist
46 0 10

Pallavi, thank you so much for your help with this. That's done the trick! 

0 Likes
oilychile
Excursionist
22 0 6

Hi, what if I want to make the underline a specific color? Thanks


0 Likes