Hover Color Text

I've added these links to my navigation bar. I used this code as the link title <i class="fa fa-youtube" style="font-size:25px;"></i>

What I want to do it make it where when I hover over the link I make specific colors. For example when you hover over twitter it would be blue, when you hover over twitch it would be purple. What would I insert into this code to do this hover effect?

@JohnWay Add to Home > Design > Custom CSS. Do similar with other icons

.fa-youtube:hover {
  color: red;
}

If it doesn't work, please share site url to check code.

Hey do I put a color code? Like a custom color code. It works but I want to put a code.

1 hour ago, tuanphan said:

@JohnWay Add to Home > Design > Custom CSS. Do similar with other icons

.fa-youtube:hover {
  color: red;
}

If it doesn't work, please share site url to check code.

Hey do I put a color code? Like a custom color code. It works but I want to put a code.

you can use color name (color: red;) or color code (color: #ff0000;) or rgb (rgb(0,0,0) or rgba, or hsl.. @JohnWay

Thank You! I have one more question. How would I change spotlight color for secondary navigation bar? What would the code be?

I mean Active color for "HEADER: SECONDARY NAVIGATION"

33 minutes ago, tuanphan said:

you can use color name (color: red;) or color code (color: #ff0000;) or rgb (rgb(0,0,0) or rgba, or hsl.. @JohnWay

How would change I Active color for "HEADER: SECONDARY NAVIGATION" what code is that?

@JohnWay Each template will have different code. Can your share your site url?

1 minute ago, tuanphan said:

@JohnWay Each template will have different code. Can your share your site url?

https://corn-contrabass-ax3n.squarespace.com/ is my template

password - view

password is view. My secondary navigation bar to the right of my social icons. I want to have the light up red when 'activate' and hover over. So If I'm on that page of that tab it is red. I have it as secondary so it doesn't effect social colors. 

@JohnWay

.Header-nav--secondary *:hover {
    color: red !important;
}
.Header-nav--secondary .Header-nav-item--active {
    color: blue !important;
}

14 minutes ago, tuanphan said:

@JohnWay

.Header-nav--secondary *:hover {
    color: red !important;
}
.Header-nav--secondary .Header-nav-item--active {
    color: blue !important;
}

 

Thank You so much! Do you work for Square space or do you just help people? I'm so thankful!

@JohnWay You're welcome. Please like if the answer is correct.

I don't work for Squarespace. Just help community 😉 

I'm freelancer, if you need more help with websites, you can consider my service (in signature)

2 hours ago, tuanphan said:

@JohnWay You're welcome. Please like if the answer is correct.

I don't work for Squarespace. Just help community 😉 

I'm freelancer, if you need more help with websites, you can consider my service (in signature)

Thank You! I have one more question. How do I make the navigation bar fixed? And when i scroll the opacity goes down a little but so it is a bit transparent?

@JohnWay

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

8 minutes ago, tuanphan said:

@JohnWay

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

 

Also what about the opacity? I want it to be just a bit transparent only when you start scrolling. I'll tip you if you have cash app? 🙂

@JohnWay Try

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.5);
}

2 minutes ago, tuanphan said:

@JohnWay Try

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.5);
}

 

It made it transparent but permanently. I only want it to be a bit transparent when scrolling. 

@JohnWay First, add to Home > Design > Custom CSS

header.Header.Header--top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
.sticky {
    background: rgba(255,255,255,0.5);
    transition: all 0.75s;
}

Next, add to Home > Settings > Advanced > Code Injection > Footer

<script>
window.onscroll = function() {myFunction()};
var header = document.getElementsByClassName("Header--top");
var header2 = header[0]
var sticky = header2.offsetTop;
function myFunction() {
  if (window.pageYOffset > sticky & window.pageYOffset < sticky + 300) {
    header2.classList.add("sticky");
  }
  else {
    header2.classList.remove("sticky");
  }
}
</script>

It made it transparent but permanently. I only want it to be a bit transparent when scrolling. 

5 minutes ago, JohnWay said:

It made it transparent but permanently. I only want it to be a bit transparent when scrolling. 

I messed something up not my social icons disappeared i made? Think I deleted something on accident?

It won't show social links on primary navigation bar anymore?

2 minutes ago, JohnWay said:

I messed something up not my social icons disappeared i made? Think I deleted something on accident?

Perhaps you mistakenly deleted some code

9 minutes ago, JohnWay said:

It made it transparent but permanently. I only want it to be a bit transparent when scrolling. 

Still not work with CSS & Script?

@JohnWay

It works for a second then when you scroll further it stops. Also, my social icons went away?op

@JohnWay You mean?

1. When scrolling, it will be transparent, and when scrolling over it will return to normal

The above two code snippets did that.

2. Or When scrolling, it becomes transparent, and so on