Main Nav and items behaviour


Currently working on my site

I’d like to replicate the behaviour of the main nav from this site, where the background begins transparent with white menu items, then when the scrolling begins it shifts to a white background and the menu items change colour too.

Could you provide any guidance on how to achieve this please?

Thank you.

Hello there,

By default the header bar background on larger screen is transparent already. So you don’t need to add the below custom CSS code:

.site-header {
  background-color: #ffffff;

To manage the main menu color before scrolling state, you can use the below custom CSS code:

.site-header:not(.float-header) #mainnav > li > a {
  color: #fff;

.site-header:not(.float-header) #mainnav > li > a:hover {
  color: #fff000;