Using Midnight.js to change nav colour

Design help Custom code
1

Hi All!,

I’ve integrated Midnight.js into my test website, so I can seamlessly change the colour of my nav based on the page sections beneath it.

It works visually… but when the nav changes from default to dark, the burger menu click interaction no longer works.

Please see this link to my test site (scroll down to the light grey section).

It seems this is occurring as midnight.js creates two instances of the nav using a mask and Webflow will only apply the interaction once per page - even though I’ve assigned the interaction at a class name level.

Has anyone else experienced this and been able to make it work?

Any help would be appreciated here - even suggestions for alternative plugins / methods for changing the nav in a clean way (other than a Webflow ‘while scrolling in view’ interaction).

If you think you have a solution and need a read-only link, just let me know.

Thanks in advance,
Ben

2

If anyone else comes across this issue, I managed to resolve it by re-initialising the Webflow ix2 interactions after midnight.js had been called / updated the DOM.

// Call Midnight.js
$('.nav.w-nav').midnight({});
// Re-initialise Webflow IX2
Webflow.require('ix2').init();
1 Like