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

Hover Color Text


JohnWay
Go to solution Solved by tuanphan,

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

Link to post
  • Answers 46
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

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

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.

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?

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. 

Link to post
  • 0

@JohnWay

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

 

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!

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

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? 🙂

Link to post
  • 0

@JohnWay Try

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

 

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. 

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>

 

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?

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

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

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