Jump to content

Hover Color Text

Recommended Posts

  • Replies 46
  • Created
  • Last Reply

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Link to comment

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

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.