Jump to content

Hover Color Text

Recommended Posts

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 comment
  • Replies 46
  • Created
  • Last Reply

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 comment

@JohnWay

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 comment

@JohnWay Try

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.