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 Okay. Remove all code from here: 

and here

then add this to Home > Design > Custom CSS

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

and 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) {
    header2.classList.add("sticky");
  } else {
    header2.classList.remove("sticky");
  }
}
</script>

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

@JohnWay

 

then add this code to Home > Design > Custom CSS

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

and add the SCRIPT Code 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) {
    header2.classList.add("sticky");
  } else {
    header2.classList.remove("sticky");
  }
}
</script>

COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0

On my tablet device the navigation bar at the top is just congested and looks bad. How do I make it where if it isn't enough space for everything it will just collapse into the menu icon? Or even auto response to size of screen?

Share this post


Link to post
  • 0
On 10/16/2019 at 4:50 AM, tuanphan said:

@JohnWay you can edit if (window.pageYOffset > sticky)

to, it can improve a bit


if (window.pageYOffset > sticky+600)

 

On my tablet device the navigation bar at the top is just congested and looks bad. How do I make it where if it isn't enough space for everything it will just collapse into the menu icon? Or even auto response to size of screen?

 

website is https://corn-contrabass-ax3n.squarespace.com/

 

password is - view

Share this post


Link to post
  • 0

@JohnWay collapse..

It need to write custom js. Quite complex, and it's beyond the scope of free support here.

You can use CSS to decrease font size/padding or split header to 2 lines..


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
1 hour ago, tuanphan said:

@JohnWay collapse..

It need to write custom js. Quite complex, and it's beyond the scope of free support here.

You can use CSS to decrease font size/padding or split header to 2 lines..

How much?

Share this post


Link to post
  • 0

@JohnWay Try adding to Home > Design > Custom CSS

@media screen and (max-width:990px) {
/* Show Mobile Header */
[data-nc-base="mobile-bar"] {
  display: block;
}
/* Remove Tablet Header */
header.Header.Header--top {
    display: none !important;
}
}

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
1 hour ago, tuanphan said:

@JohnWay Try adding to Home > Design > Custom CSS


@media screen and (max-width:990px) {
/* Show Mobile Header */
[data-nc-base="mobile-bar"] {
  display: block;
}
/* Remove Tablet Header */
header.Header.Header--top {
    display: none !important;
}
}

 

wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth?

Share this post


Link to post
  • 0
21 hours ago, JohnWay said:

wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth?

 

23 hours ago, tuanphan said:

@JohnWay Try adding to Home > Design > Custom CSS


@media screen and (max-width:990px) {
/* Show Mobile Header */
[data-nc-base="mobile-bar"] {
  display: block;
}
/* Remove Tablet Header */
header.Header.Header--top {
    display: none !important;
}
}

 

@tuanphan wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth?

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