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:
https://webflow-friendly-components.webflow.io/webflow-website-navbar-and-mega-menu

Link to Webflow Friendly Components cloneable:
https://webflow.com/made-in-webflow/website/webflow-friendly-components

My Webflow public profile:
https://webflow.com/@francescocastro

Weekly Recommendation:
Polyphia - Playing God
https://youtu.be/Z5NoQg8LdDk

*********

We can talk on LinkedIn:
https://www.linkedin.com/in/francescocastronuovo/

Or we can get to know each other on Twitter:
https://twitter.com/francescoflow

*********

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