Navigation colour change on scroll

Site URL: https://www.woodlands.derby.sch.uk

Hi,

I wondered if anybody was familiar with changing the colour of the navigation bar when scrolling down.

Currently, my navigation is set as 'solid' and 15% opaque - however I would like the bar to turn green when scrolling down and solid in colour. I was wondering if there was a work round for achieving this.

https://www.woodlands.derby.sch.uk

Any advice would be welcome! Thank you! 🙂

46 minutes ago, aws_derby said:

Site URL: https://www.woodlands.derby.sch.uk

Hi,

I wondered if anybody was familiar with changing the colour of the navigation bar when scrolling down.

Currently, my navigation is set as 'solid' and 15% opaque - however I would like the bar to turn green when scrolling down and solid in colour. I was wondering if there was a work round for achieving this.

https://www.woodlands.derby.sch.uk

Any advice would be welcome! Thank you! 🙂

Try adding to Home > Design > Custom Css

#header.shrink .header-nav-item  > a {
  color: orange;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

My testing

The text does change colour thank you. Is there a way of changing the navigation bar itself into a solid colour?

Thanks again for your help!

On 8/10/2022 at 2:53 AM, aws_derby said:

The text does change colour thank you. Is there a way of changing the navigation bar itself into a solid colour?

 

Thanks again for your help!

Use this CSS code

header#header.shrink {
    background-color: green !important;
}