Create a sticky navbar with a dropdown menu - Webflow tutorial

[@JdotCarver]

I don't even use web flow. These videos are just that good.

[@MoMoMan0]

I'm telling ya, you should consider it.

[@DeArmondTool]

ME TOO.... I don't use Webflow but these are GREAT!!!!

[@rodrigo.lamadrid]

These have to be the best company-produced tutorials I've ever seen. Engaging, fun, and more useful than creator-produced content. Keep it up!!

[@anthonylee907]

Webflow is ok. But this narrative guy is awesome!

[@JITCompilation]

still 1000% better than Wordpress.

[@zilosphoto]

these videos are legit. After seeing so many of these, i signed up, started using webflow, purchased it, danced a little, went back to webflow and made a site.. then danced again, drank some coffee and went to sleep, in that order. EPIC

[@CameronBrownOKUSA]

I've never had so much fun watching tutorial videos. Well past midnight here and I just keep hitting next and learning while laughing! Haven't built anything with the platform yet but can already tell I'll be ending my Squarespace subscription.

[@the_ecips9692]

I can't tell you guys how much I love webflow. You made my life SO MUCH EASIER! Thank you for continuing with the videos and the development.

[@GangstaMindVC]

Your tutorial videos are just priceless. This is even better than some Netflix shows.

[@babyshmay]

this video was so good i had to leave the webflow website to come like it. i was forced, compelled by respect for quick humor and efficient tutorials. 10/10

[@martinbajsic4836]

as a video editor - turned motion designer - turned motion designer pursuing web interaction design, all I can say is: never regretted opting out from video editing until now, realizing that Dylan guy gets to edit this perfectly dry humor all day long and get paid for it. Kudos to Dylan, these videos are next level

[@Webflow]

Thanks, Martin! 💙

[@HACHmusic]

I've never enjoyed a tutorial this much, ever in my life!

[@Benji-Lindz]

9:23 Wow... that's got to be one of the cleanest cuts I have ever seen in a KZbin video.

[@shubhamraut1039]

I would learn anything if that guy narrates the tutorials. Great job!

[@DanzEnglish]

Finally, the narrator's face. Love these vids. So straightforward. Thank you.

[@martijntreffers49]

Finally someone who gets it: adding fun to a tutorial video makes it soooo much better to digest (and helps remember the content) *Thank You*

[@Marsell88]

Your humor reminds me of one by the name of Andrew Kramer... and that's a good thing. Brilliant...

[@konohamaru8497]

These jokes made me want to learn webflow, nocode gang 🤣🤣🤣

[@emekaajuzie1340]

I swear

[@swaggerbauer]

i really like the humor and the tone of these videos.. and also i'm learning stuff! used to be "writing" webpages in vs code or notepad++ back when ... but now i, too, point and click and it doesn't feel bad ;)

[@stewdean]

Ah, so that's what he looks like. Love the presentation style.

[@2xKH]

I’m gonna buy a subscription and try to use Webflow just because of how amazing and creative the team behind this tutorial is!! Amazing job

[@mrpips76]

You have the best instructional video's by far. Clear, concise, and straight to the point. Great use of video real estate! Much appreciated!

[@MrrDoNN]

after 3-4 years on webflow .... i discovered these videos ... love the editing and jokes! ... and the webflow stuff as well..

[@misterk7_-]

Such an amazing tool, and great tutorial video! This is something they would spend an entire class teaching you at College and you would only catch not even half the amount of information this video presents in only 9 minutes.

[@Webflow]

💙

[@ArdikaPercha]

OMG one of the best tutorial practice video I ever seen 🥺

[@AndrewOnTestingCars]

I now love Webflow just because of this video! 😂even though I have never used Webflow before. Thanks very much

[@TheBrandSamurai]

I've come to expect the little humour jabs in each video. I'm interested in learning more about how to use the platform, sure, but a part of me is just waiting for the punch. Then BAM! There it is. So good.

[@TheKetoSurvivor]

That was awesome! I can't wait for a demo that detailed showing how to make a grid-based big/mega menu that is fully responsive at all breakpoints. I've been fighting most of this year trying to figure that one out. Driving me CrAzY!

[@kelvinedionwe]

Best tutorial I've watched. Funny and engaging. Great work webflow.

[@mariahcline9925]

These videos are better than most TV shows.

[@conzone]

I'm sure it's a love or hate feeling towards this video style, seems like more love. But man the humor and dialogue is brutal IMHO. I just want the information and to figure out how to do something without all the quirky comments. Sure you get a little chuckle the first couple of times and I'm happy you guys are clearly having fun making these, though beyond that I'd just prefer to get the information delivered in the shorted time possible without the extra time waste.

[@yuelingtan5825]

5:25 "Three seconds." got me wheezing 😭

[@andrewmackayarchetypemac7619]

Who wrote this? The Webflow 101 videos that preceded this one were perfectly executed but this one is exquisite. I only heard of Webflow today but I want to build a site with it just to see if it's as much fun as the tutorial. But I want to watch the rest of the tutorials first. 🤣

[@rukeyburg1084]

I don't care if this is acted or real, the scenarios with the mouse problem is genius!

[@NonTwinBrothers]

I love how they're literally just playing these as ads now Good stuff

[@paulirwin2678]

The clothes bit literally made me lol! 🤣

[@Itsrichayo]

The Champ was here. Another winning explanation

[@DavidCouillard]

My 2021 goal is to be as good as these Webflow guys at making tutorial videos. (And most probably master Webflow at the same time!)

[@emekaajuzie1340]

Awesome tutorial...absolutely sold on web flow...and yes that nav bar looks delicious.

[@RandleMcMurphy123]

I'm only here for the jokes.

[@albertoventures6365]

As always, taking out the line between fun and learning. I LOLed. But not that usual "LOL" that we send when a friend shares a mildly amusing meme. I actually laughed out loud. I'm about to make the most beautiful nav bar today baby. Oh yes. I just had coffee.

[@thorbjorningason8479]

learning has never been more fun

[@goharkhan045]

amazing style of teaching. Great bro

[@binli3217]

You guys made me laugh, outstanding entertainment! Well done.

[@scottdanelesko7868]

I watch these videos to learn, sure, but also to fill the necessary prescription for humour these dark days require.

[@mannylopez1165]

YOU GUYS R THE BEST!!!

[@wey.p1]

the "3 Seconds" voice at background got me 🤣

[@MartinWetzels]

Thanks , that was a great help. btw. put in some batteries in the clock behind you :)

[@Mettabeshay]

the 3 seconds joke killed me

[@Cs-ys2hx]

Love you guys, you're AWESOME!!

[@cyperbug917]

Webflow is ok, but this guy is awesome!!

[@onwukafavour2278]

Thank you so much for this, it was really helpful!!!

[@Talentaire]

Excellent videos and really funny too.

[@EducationalTheatre]

at the beginning i thought it was ad and looking for skip but see its an original video not an ads 🤣

[@jenniferward6821]

Cutest ears. Wingnuts look good on him!

[@2mbst1]

Love the jokes! Being a frontend-dev looking into this for an upcoming project, I enjoy this thoroughly. Also absolutely digging the approach webflow takes and how it's basically "just" 100% frontend development, but without code.

[@lanepicturecompany]

Great tut! Super helpful! Charge your mice, folks.

[@JohnChaplin]

this guy is so good

[@davidw717]

But... What about animations/motion effects ? ... Say on the Nav bar once clicked or the fixed menu once scrolling?

[@jaztingaming5757]

great tutorial

[@jamesbaduor5194]

Yep, best tuts

[@twentytwoalchemyhq7027]

Great stuff

[@bidecui]

Love webflow now!

[@JoshSmith-xm4gz]

Great videos

[@christopherdockens8643]

Great video, but can you do another one that adds how the dropdown was created, that is the primary reason I wanted to watch this one. Thanks.

[@Webflow]

Hi, Christopher. The Dropdown element is added from the Add panel at 7:34 - is this what you're referring to or something else? That Dropdown element is added and styled from scratch in this video, so we'd like to better understand what you're looking to achieve so we can help out!

[@ShariffBroadcast]

Dylan was completely flabbergasted ☠

[@musicxsam1]

At this point if Webflow releases a User Manual of 1000+ pages, I wont mind reading it thru! 😂

[@Chefshaheena]

Good morning

[@ilovelifeqqq]

i like this man

[@jobienify]

@webflow All your tutorials are great, I have just had one problem with the navbar. The position is fixed but all other elements on the page seem to go on top of the nav when scrolling, rather than behind. Eventually I would like to reduce the opacity to my nav bar, but even with full opacity the other elements appear on top when scrolling. Is there a setting somewhere I’m missing ?

[@yosoydavide]

OMG I learned.

[@tombreen7533]

Fantastic!

[@1filmpjesmaken]

Nice video! I want to have a logo and a button (instead of full navbar). What is the best method to achieve it? Should I still use navbar from the Components list, or should I build it from scratch and just hold the logo (image element) and a button in a div block as a wrapper? Thank you so much

[@Webflow]

You can go with either route. Build it from scratch or use the navbar component and delete elements you do not need.

[@mahmoudkhodeir531]

thank you so much

[@brandonmosco8365]

Consuming a Nav bar! Lol!!!

[@novabraden8646]

Hello, Great Video But can the dropdown text be linked to a page and then also have the dropdown links too. Thank you for your prompt response.

[@Webflow]

You can wrap the dropdown label with a link block, set the dropdown to open on hover, then set your link for the text label link: share.getcloudapp.com/X6u7EbbN Hope this helps :)

[@mrwongus]

How about a drowdown nested in another dropdown and wanting the nested to dropdown on the left or right side? As default they just dropdown inside each other.

[@buladice_04]

your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou

[@Webflow]

If you can, please post your question on our community forum at discourse.webflow.com and be sure to also include your project's share link in your post. Here is how to get your project's share link: university.webflow.com/lesson/share-your-project-and-invite-collaborators

[@einarmb]

Is there a way to animate the dropdown itself? For instance have the dropdown elements fade in, or move?

[@SeptemRoptem]

yes, you can do that. Look up tutorial you'll find something.

[@bililancun8867]

can you build and publish your own website for free if you already have domain or you have to pay for one of the plans?

[@HeatherDuarte-p8s]

I'm using a template that has a home tab with three different options (Home A, Home B, and Home C), and I just want to utilize Home C as my main home. How do I hide the other home pages? I don't want them showing when I publish my website. Is there a video on this? I tried hiding, but it hides the whole button in the Navbar.

[@KarimElkharraz]

u didnt talk about reuse the navbar and mkae just little changes with effect the source

[@DesignDen673]

Is there a way to clone the initial state of the project to able to work on the lesson? As a beginner it took me 45 mins to figure out how to create that bg hero shot before I could learn how to place the navbaar.

[@Webflow]

Here are some projects tagged with "sticky nav" that you may be able to clone: webflow.com/made-in-webflow/popular?page=1&search=sticky%20nav Hope this helps :)

[@RD-jr8nv]

Never looked at a hamburger like that before. Bun - Protein - Bun. Cheers

[@hendrikkoopmans8469]

@webflow How can I move sticky nav within a hero overlay to the top of the screen?

[@egnmic001]

The dropdown text color doesn't obey the class in practise (unlike in this video)... @Webflow can you please help?

[@tylervelasquez5639]

I wanna consume a nav bar rn lolol

[@plinyelder8156]

Sticky navbar doesn't collapse in mobile mode.

[@truthseeker1278]

I must be dumb, but did not understand any difference between sticky and fixed. In my case the rest of the content overflowes that bar, wether it is set on sticky or fixed. And I did uncheck the eye for overflowing view. What do I do wrong??

[@Webflow]

First, you're not dumb. Everyone is learning something new at any given moment :) Second, sticky is a CSS property that allows you to "fix" the element to a parent element that has a CSS position set to relative. Fixed all you to "fix" or "pin" the element to the HTML body tag and ignores any parent element.

[@entertainmentyoutube3606]

sadly the drop down doesnt work in the resposive breakdowns

[@kurtmiller5194]

How did you guys get John Mulaney to do your tutorial videos?

[@QuantumKayos]

How do i add a little effect when someone hovers over it though? like an underline or something to the text? since nothing happens when you just put one down. I have a different menu bar that does have that, but then wont create a hamburger menu for smaller devices... :L

[@Webflow]

To add an effect on hover, select the link and change the state in the Style Panel to Hover. Now any design changes will only be applied to the hover state. Check out this article on using states in Webflow. university.webflow.com/lesson/states

[@jimmehgakou3099]

What is google search for?

[@rukkay3708]

Can someone please help me!!! Im a complete newbie.. How can I have some nav links at the far right of the page and some links at the far left next to the brand element without ruining the links in the dropdown menu?

[@Webflow]

Hi, Ruk Kay! If you post on forum.webflow.com, you can share your project's read-only link and the folks over there can look at your project! It's hard to diagnose without digging in. If the functionality isn't working as expected, you can also reach out to [e-mail], but the Webflow Forum is usually a good bet!

[@hamzaomenxx1299]

why there is no navbar-setting in my website, did you guys changed its place or what?

[@Webflow]

The navbar element setting can be found at the top right. For more information, please read this article: university.webflow.com/lesson/navbar#style-a-navbar Hope this helps 😀

[@ElBeeEss]

Wait. I'm feeling dim here. I didn't understand the difference between fixed and sticky. They both looked the same to me!

[@Webflow]

Hi, Sharp Words! The distinction can be a bit tricky. An element set to fixed position doesn't take up any space on the page. An element set to sticky still takes up space, and pushes other elements out of the way. A fixed navbar, if placed at the top of a page that has a section underneath, will overlap that section when the page is loaded (the section is tucked underneath the navbar). But a sticky navbar, if placed a the top of the same page, will push down the page's first section (the section starts after the navbar, and is pushed down so the two elements don't intersect when the page is loaded). A great way to visualize this is to toggle between fixed and sticky on an element at the top of the page while observing how it affects page content underneath it.

[@ElBeeEss]

@@Webflow Three things... 1: Thank you for the very enlightening answer. Now I get it! 2: I can't believe you're working Sunday answering random stupid people. 3: I can't believe you answered so quickly! Thank you xxx

[@mattm7426]

When I create a class it doesnt save

[@toby-o-rink]

Can I add a third menu like a filter under the submenu?

[@Webflow]

Yes. You can add a dropdown menu within another dropdown menu.

[@toby-o-rink]

@@Webflow OK. And I want to place a store cart in the main menu on the far right. But Webflow does not allow this. Why?

[@fantomlimb5008]

Why are you using a mouse and a trackpad?

[@Webflow]

A lot of us on the Education Team use a vertical mouse to reduce wrist strain for broad motions like moving the cursor around etc., and a trackpad for gestures like scroll, pinch to zoom etc. Works great for Webflow, Figma, Premiere, Resolve, and of course, Calculator.

[@denzarutsky7805]

Mobile menu not closing on external/internal link

[@Webflow]

Hey Den, if possible, it would helpful for you to post this onto our forum so that we and our community can solve this with you. forum.webflow.com

[@kikal85]

Does anyone know why my dropdown menu from the navigation button hides below the content of the page? thanks

[@Webflow]

Hi Enrique! Great question! The best place to get help with design related questions is on the Webflow Forum: forum.webflow.com/ Please post your question there along with your Read-Only link for your Webflow site so that our community and team can help. Thanks in advance!

[@coffeefps]

try playing around with the z-index

[@deadhanddesign1856]

I'd like to consume a Nav Bar please