Jump to content

How can I change the color of my navigation button on scroll?

Recommended Posts

1 hour ago, imdanielduncan said:

Site URL: https://imdanielduncan.com

I'm updating my website, imdanielduncan.com, and was wondering if there's a way to change the color of my navigation button on scroll? I was able to change the header background color and the navigation links to the color I want on scroll, but can't seem to find a way to change my button color on scroll as well.

We can achieve changing color of button when hovering it via Some Css code. With the changing on scrolling your page, we need to use some javascript to watch your action on page and set the appropriate style for it.

The javascript is only available on the business plan or the above one. What is your current plan?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
6 hours ago, bangank36 said:

We can achieve changing color of button when hovering it via Some Css code. With the changing on scrolling your page, we need to use some javascript to watch your action on page and set the appropriate style for it.

The javascript is only available on the business plan or the above one. What is your current plan?

My current plan is the Personal Plan.

Link to comment

what is your protected password? I can take a look at your current state

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
26 minutes ago, imdanielduncan said:

The password is: 22_fall_update

The website doesn't look great right now, because I'm still in the process of updating it, but you can see what I'm trying to do with the header.

Can you take some screenshots of the button you want to change color on scrolling?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

With the button on header, we can change its background color when scrolling down.

#header.shrink  .header-actions-action a {
  background: red;
}

Try my code in Home > Design > Custom Css

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.e0894607f181e75462da9699c99d716b.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

If you need change color on scrolling for other buttons (not on the header navigator), it will requires the javascript code (only available on Business Plan or above) as I recommended before

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, bangank36 said:

With the button on header, we can change its background color when scrolling down.

#header.shrink  .header-actions-action a {
  background: red;
}

Try my code in Home > Design > Custom Css

Support me by pressing 👍 if this useful for you

That worked, thanks!  Is there any way I can change the text color on scroll as well?  Or does that require javascript code?

Link to comment
7 hours ago, imdanielduncan said:

That worked, thanks!  Is there any way I can change the text color on scroll as well?  Or does that require javascript code?

Just add color: your desired color on above code

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

You can get reference from here: https://www.w3schools.com/css/css3_buttons.asp

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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