Webflow Navbar & Mega Menu | Webflow Components Explained

In today’s video we are going to recreate the navbar and mega menus that we can see on Webflow's website.

This will be quite a long build - because we will start from scratch, from an empty canvas - but also a honest and complete build, we will go from start to finish and I will explain each and every step of the process.

And we are going to do even a bit more than that.

Of course, we are going to talk about mega menus, grids, dropdowns, and even embedded SVGs. But we are also going to add a dropdown animation to Webflow's mega menus, you will see me debugging inside Webflow, we will talk about Webflow workarounds, and naming conventions for classes and animations.

More importantly, we will talk about Webflow Components, the new Webflow Components, and how to link them to the CMS.

If you liked the video, feel free to hit the like button and subscribe to my channel. And if you have any suggestions about future videos or things I can improve, share a comment below! 😁

*********

Live link to Webflow Navbar & Mega Menu Build:

Link to Webflow Friendly Components cloneable:

My Webflow public profile:

Weekly Recommendation:
Polyphia - Playing God

*********

We can talk on LinkedIn:

Or we can get to know each other on Twitter:

*********

0:00 Intro
0:25 Project Preview
0:40 Project Overview
1:48 Build the skeleton of the navbar
35:25 Add the first hover interactions
44:43 Start building the "Product" mega menu
1:15:18 Create our first Webflow Component
1:27:40 Finish up the "Product" mega menu
2:06:08 Build the "Resources" mega menu
2:33:43 Start building the "Solutions" mega menu
2:39:45 Connect component instances with the CMS
2:47:58 Finish up the "Solutions" mega menu
2:50:57 Add hover interactions to the dropdown links
3:06:08 Add a Dropdown Opens/Closes interaction
3:24:30 Outro

#webflow #madeinwebflow #nocode

[norbertpeto]

Very good video, thanks for this detailed guide. I am looking forward to your next video. 👍

[generationalconcussion]

Really good tutorial, learned so much along the way. Do you have plans on making a tutorial on how to make an adaptive version of this navbar? Thank you!

[keetalux]

Fransss!!! Mo from flux! hehehe followed you here!

[josephgraham]

Can you tell us how the blue drop shadow on the dropdown hover state remains visible on click? I'm perplexed!

[pelangos]

Awesome work thanks! I am working it into my site. appreciate the cloneable and that you made it mobile responsive