Change link color on hover and when active

Hi,

I'm trying to change the color of a link, only on hover and when it's active. It currently works properly in my Nav, but I'd like everywhere else, specifically in body text and h2 (for example in the footer and the About page). Links should be black until you hover or they're active, when they should be #FFD801.

I'm using the York template and my site is https://www.sarahrabinovich.com/.

Thanks!

@sarahrab Add to Home > Design > Custom CSS

/* Footer Link - Normal */
footer#footer a {
    color: red;
}
/* Footer link - Hover */
footer#footer a:hover {
    color: green;
}
/* Footer Link - Active */
footer#footer a:active {
    color: violet;
}
/* About Page Link - Normal */
body#collection-58951ef9e3df28d5835142f9 .main-content a {
    color: red;
}
/* About Page Link - Hover */
body#collection-58951ef9e3df28d5835142f9 .main-content a:hover {
    color: pink;
}
/* About Page Link - Active */
body#collection-58951ef9e3df28d5835142f9 .main-content a:active {
    color: blue;
}

@tuanphan Thanks so much! That worked perfectly. How can I do the same for body text on pages other than the About page?

56 minutes ago, sarahrab said:

@tuanphan Thanks so much! That worked perfectly. How can I do the same for body text on pages other than the About page?

Replace body#... with Page ID. See my signature to know how to find Page ID.

@tuanphan Thank you! 

@tuanphan

Hey, Im have a similar question to this.  I created a body of text to create that "second navigation bar look". Ultimately, I want to create a filter navigation bar. However, I have no idea on how to code something like this. 

Basically, I have three categories and I want to filter them by category. But since I have no idea how to code that, I created anchor links. So would you be able to help me on how to create that active link look or would you know of  how to code a filter element navigation bar? 

1. If you happen to know of a filter navigation code, that would be super! If not totally cool. I been researching for months and have not yet figured that out.. 

2. Would you happen to know how I can make the active link change color? For example my current text is white my hover is #868A89 (grey)... I would like my active link to be the same color as my hover. Would you be able to help me with this? 

Here is the page so you have a visual idea of what I'm talking about

Link: https://www.vallettacreative.com/journal

Thank you so much in advance! 

On 5/23/2020 at 10:15 AM, NELLY said:

@tuanphan

 

Hey, Im have a similar question to this.  I created a body of text to create that "second navigation bar look". Ultimately, I want to create a filter navigation bar. However, I have no idea on how to code something like this. 

 

Basically, I have three categories and I want to filter them by category. But since I have no idea how to code that, I created anchor links. So would you be able to help me on how to create that active link look or would you know of  how to code a filter element navigation bar? 

 

1. If you happen to know of a filter navigation code, that would be super! If not totally cool. I been researching for months and have not yet figured that out.. 

2. Would you happen to know how I can make the active link change color? For example my current text is white my hover is #868A89 (grey)... I would like my active link to be the same color as my hover. Would you be able to help me with this? 

 

Here is the page so you have a visual idea of what I'm talking about

Link: https://www.vallettacreative.com/journal

 

Thank you so much in advance! 

Have you solved it yet?

@tuanphan

It was solved and then it broke... The code is correct but my links aren't loading. It keeps saying the link doesn't exist... but it exist.. so Im so confused. 

Hi - I think I have the same question. I have a yellow hover in my nav bar and in my footer I want a grey hover. This is the code and it doesn't seem to work. I am getting a hover in the footer but it appears to be a pale yellow. Any help is greatly appreciated.

Here's the code that I am using for the nav and the footer

/* Remove 'Featured' Heading from Summary Block Carousel */
.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-heading {
  display: none;}

/* remove underline on nav */
.header-nav-item--active a {
  background-image: none !important;
}

/* Nav item hover color */
.header-nav-item a:hover {
    color:  #ffd54f !important;
}

/* Nav item active color */
.header-nav-item--active a {
  color: #ffd54f !important;
}

/* Footer Link - Normal */
.footer a {
    color: white;
}
/* Footer link - Hover */
.footer a:hover {
    color: #424147 !important;
}
/* Footer Link - Active */
.footer a:active {
    color: #424147;
}

p a {  background-image: none !important;  }