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

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.

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?

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.

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

29 minutes ago, bangank36 said:

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

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.

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?

37 minutes ago, bangank36 said:

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

Sure.  I attached a screen recording. I'd like to change the button in my navigation to black when I scroll.

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

My testing

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

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?

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

1 hour ago, bangank36 said:

Just add color: your desired color on above code

Thank you! Sorry to bother you with one more question, can I also change the color of the button outline on scroll?

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

On 10/8/2022 at 11:15 AM, bangank36 said:

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

 

Awesome, Thank you!