Remove underlines on header hover links (Debut theme)

Solved
Highlighted
Excursionist
40 0 4

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;	
}
0 Likes
Highlighted

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
40 0 4

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
Highlighted

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
40 0 4

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

0 Likes
Highlighted
.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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
40 0 4

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
Highlighted

Success.

.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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Excursionist
40 0 4

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

0 Likes
Tourist
16 0 1

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


0 Likes