Change colour when hovering over links and removing underline

Solved
Jaimz
Tourist
9 1 2

Hey guys,

I have two questions about hyperlinked words:

  1. How do I change the colour of a hyperlinked word when hovering over that word?
  2. How do I remove the underline that appears when hovering over a hyperlinked work?

My website is https://www.artpaths.co.uk/ and I am using the Debut theme. 

I have some understanding of editing code so any help will be greatly appreciated  

0 Likes
ErSanjay
Trailblazer
175 19 24

@Jaimz  can you please share a screenshot of where do you want to change it.

Jaimz
Tourist
9 1 2

Hi ErSanjay,

Thanks for the reply and sure, it's the header menu as shown below.

Jaimz_0-1609267875827.png

 

0 Likes
Jaimz
Tourist
9 1 2

Here's the website link if it helps too: https://www.artpaths.co.uk/

0 Likes
ErSanjay
Trailblazer
175 19 24

@Jaimz   add this CSS code into your theme file 

goto your theme and edit code  then goto /asset/theme.scss add this code end of the file 

you need to replace the color:red ; to you your color 

 

a.site-nav__link.site-nav__link--main:hover site-nav__label {
    color: red;
    border-bottom: none !important;
}

 

 

if need more help on theme customize you can hire me.

Jaimz
Tourist
9 1 2

This is an accepted solution.

Thank you @ErSanjay , although the code you sent me didn't work I found a solution by using the below, this changed the colour of the hyperlinked text.

Although I haven't found a way to remove the underline I now understand it helps with accessibility so I'll leave it in there. Thank you for your help!

a:hover {
    /* Color goes here */
    color: #59AEF2 !important;
}

 

0 Likes
ErSanjay
Trailblazer
175 19 24

@Jaimz  you don't know the code then  why to post here just doing your no of  solution increase your 

you doing malicious activity here. 


0 Likes
ErSanjay
Trailblazer
175 19 24

@Jaimz  the answer was working  you did not follow the correct steps 

ErSanjay_0-1609585204548.png

 

0 Likes
sarahkay
New Member
4 0 0

I'm not a Shopify expert but I know general CSS would be:

 a:hover {
      text-decoration: none;
    }
0 Likes