Change color sticky menu and logo when scrolling down

Hi there,

Are you using a merged header element by any chance?

Let me know :)

Hi Leo

I am using the Off Canvas Panel menu.

Hi Edwin,

Your site seems to be in maintenance mode. Can you give us access so we could inspect the site?

You can add the site details on the Private Information text area.

Thanks.

Hi Elvin

Try now. I removed the Maintenance mode

You are using a merged header element so you can actually set the transparent colors for the static header and navigation within the element under the Site Header tab:
https://www.screencast.com/t/tW6PQaAX

Then the sticky navigation color would inherit the colors set in the customizer.

The result should be similar to this:
https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

Let me know if this helps :)

Hi Leo,

Thanks, but what i am after is that the color of the menu and logo changes when the background of the color change.

You can see it in the website https://ajandco.com.au/ when it is on top of white background the color of the logo and menu is black and when you are on black background (scroll in page) the menu and the logo is white.

This is pretty tricky to do.

Your reference site is pretty complex since it uses scripts to control how the hamburger icon changes.

This is doable w/ CSS though.

Try this CSS code:

nav{
mix-blend-mode:difference;
}

button.menu-toggle{
background-color: transparent;
transition: background-color 0.3s;
}

button.menu-toggle > span.icon-menu-bars{
color:white;
}

We're basically taking advantage of CSS's mix-blend-mode property as opposed to your reference site's script controlled swapping headers.

Thanks Elvin.

That didn't work. I guess i will have to try it with JavaScript?

This kind of custom solution is out of the scope of this forum unfortunately.

I think the logo part would be very complicated to achieve.

You could try hiring a developer using a service like this:
https://codeable.io/