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

Hover Color Text

Question

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?

Screen Shot 2019-10-15 at 7.45.46 PM.png

Share this post


Link to post

Recommended Posts

  • 0

@JohnWay

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

 

Share this post


Link to post
  • 0

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

Share this post


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

Share this post


Link to post
  • 0

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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
  • 0

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

Edited by tuanphan

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
  • 0

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

 

Share this post


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

Share this post


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

Share this post


Link to post
  • 0

@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

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