Midnight.js - Switch fixed headers on the fly

Want to use custom markup for each header?

You just need to add a div with the class .midnightHeader.default inside your header, as well as any other custom headers you want.

For instance the "butterflies" section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.

<nav class="fixed"> <div class="midnightHeader default"> <a class="logo">Logo</a> </div> <div class="midnightHeader butterflies"> <a class="logo">Logo</a> <span class="a-butterfly"></span> <span class="another-butterfly"></span> </div>
</nav>