[Support request] 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 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.

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 🙂

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.

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/