Nov 24, 2019
White Arrow icon
Back to all Elements

Simple Mega Nav (Similar to Mailchimp's)

A very simple mega navigation bar, opens on hover and changes background color on scroll.

Creating the Nav element is a short process recorded here.

Once we're done, we can add the short code, that changes the Nav background color when user has scrolled the page x pixels.


 $(window).on("scroll", function() {

   if ($(window).scrollTop() > 100) {


   } else {






We can see that the code adds the '.white' classname to the '.mega-nav'. We need to create this class name in the Designer, or add it manually in code.

Adding it in code will make it less easy to edit / change. Adding it in the Designer without having an element with this this class results in the ability to delete the classname at the Style Manager's Clean-up:



Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Dynamic Height


A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon

Maintain Form Height on Success


Using a little bit of jQuery to adjust the success message height

Read more
White Arrow icon