Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
sarahrab

Change link color on hover and when active

Question

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!

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

@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! 

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

@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. 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...