Simple Mega Menu in Webflow - Tutorial (2021)

How to create a basic mega menu.

Join the Pixel Geek Community:

Want to support my content? Consider donating here:

I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.

The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.

-------

Like what you see? Subscribe here:

-------

[charlimarieTV]

THANK YOU for this I was totally stuck on how to make my dropdown the full width of my container. got it working now! 🙏

[shrimpflea]

Nice video...the main thing I got from this was the very last "open on hover"...been looking for that for days.

[craigthomas]

Awesome work. Now I get why I struggle doing mega menus because of parents and childs. Thanks

[billdodson]

Yeah this is awesome - thank you!
Related next step: How to make the list items in the megamenu appear in 2 or 3 columns...? I'll have to tinker with it

[rockhead]

Dah, where do you add the text for each choice in the dropdown menu!?

[episodicza]

When your browser swithces breakpoints to one where the navbar collapses to hamburger, then your absolute positioning breaks because the Nav Menu bit becomes Absolute. When you widen the browser again, the absolutely positioned dropdown list remains absolute to the NAv Menu which is... weird.
So it doesn't quite work responsively across to a smaller breakpoint

[ERICKP-hh]

When a user clicks on a dropdown menu in Webflow, I would like the currently open dropdown menu to close and the selected dropdown menu to be displayed.

[keithmanix]

Why can't I custom code a blurry background on the dropdown list itself? CSS not working, am I missing something? Created inside the Dropdown, Div and the links are within the Div in a grid.

<style>

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
.new-megamenu-wrapper{
background-color: rgba(51, 51, 51, .5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
</style>