Create a sticky navbar with a dropdown menu - Webflow tutorial
HTML-код
- Опубликовано: 16 май 2024
- In this video, we'll cover the ins and outs of the Webflow navbar, and we'll do it in 6 parts.
1. Learn the basics of a navbar
2. Fully style a navbar
3. Adjust the menu button in a navbar
4. Reuse the navbar on multiple pages
5. Style a persistent navbar using fixed or sticky positioning
6. Add a dropdown to a navbar
Steps in the video:
00:00 - Introduction
00:30 - Basics of a navbar
02:29 - Styling
04:11 - Menu button
05:03 - Reuse on pages
05:54 - Navbar at top
07:25 - Add dropdown
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
I don't even use web flow. These videos are just that good.
I'm telling ya, you should consider it.
ME TOO.... I don't use Webflow but these are GREAT!!!!
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!!
Webflow is ok. But this narrative guy is awesome!
still 1000% better than Wordpress.
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.
Your tutorial videos are just priceless. This is even better than some Netflix shows.
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
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.
9:23 Wow... that's got to be one of the cleanest cuts I have ever seen in a RUclips video.
I would learn anything if that guy narrates the tutorials. Great job!
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
I've never enjoyed a tutorial this much, ever in my life!
These jokes made me want to learn webflow, nocode gang 🤣🤣🤣
I swear
Ah, so that's what he looks like. Love the presentation style.
Finally, the narrator's face. Love these vids. So straightforward. Thank you.
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 ;)
You have the best instructional video's by far. Clear, concise, and straight to the point. Great use of video real estate! Much appreciated!
Best tutorial I've watched.
Funny and engaging. Great work webflow.
after 3-4 years on webflow .... i discovered these videos ... love the editing and jokes! ... and the webflow stuff as well..
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
Thanks, Martin! 💙
Your humor reminds me of one by the name of Andrew Kramer... and that's a good thing. Brilliant...
OMG one of the best tutorial practice video I ever seen 🥺
Awesome tutorial...absolutely sold on web flow...and yes that nav bar looks delicious.
amazing style of teaching. Great bro
The Champ was here. Another winning explanation
These videos are better than most TV shows.
5:25 "Three seconds." got me wheezing 😭
the "3 Seconds" voice at background got me 🤣
Thank you so much for this, it was really helpful!!!
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
Love you guys, you're AWESOME!!
learning has never been more fun
YOU GUYS R THE BEST!!!
The clothes bit literally made me lol! 🤣
I now love Webflow just because of this video! 😂even though I have never used Webflow before. Thanks very much
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.
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!
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.
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*
You guys made me laugh, outstanding entertainment! Well done.
I love how they're literally just playing these as ads now
Good stuff
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.
💙
this guy is so good
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.
Yep, best tuts
Excellent videos and really funny too.
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!)
Cutest ears. Wingnuts look good on him!
great tutorial
Great tut! Super helpful! Charge your mice, folks.
I don't care if this is acted or real, the scenarios with the mouse problem is genius!
Love webflow now!
Webflow is ok, but this guy is awesome!!
Great stuff
i like this man
Fantastic!
thank you so much
Great videos
OMG I learned.
I watch these videos to learn, sure, but also to fill the necessary prescription for humour these dark days require.
the 3 seconds joke killed me
I'm only here for the jokes.
Thanks , that was a great help.
btw. put in some batteries in the clock behind you :)
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. 🤣
@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 ?
at the beginning i thought it was ad and looking for skip but see its an original video not an ads 🤣
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.
But... What about animations/motion effects ? ... Say on the Nav bar once clicked or the fixed menu once scrolling?
@webflow How can I move sticky nav within a hero overlay to the top of the screen?
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
You can go with either route. Build it from scratch or use the navbar component and delete elements you do not need.
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.
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.
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 :)
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.
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.
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 :)
Is there a way to animate the dropdown itself? For instance have the dropdown elements fade in, or move?
yes, you can do that. Look up tutorial you'll find something.
sadly the drop down doesnt work in the resposive breakdowns
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?
Dylan was completely flabbergasted ☠
your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou
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
The dropdown text color doesn't obey the class in practise (unlike in this video)... @Webflow can you please help?
u didnt talk about reuse the navbar and mkae just little changes with effect the source
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
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
Good morning
Consuming a Nav bar! Lol!!!
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.
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!
At this point if Webflow releases a User Manual of 1000+ pages, I wont mind reading it thru! 😂
What is google search for?
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?
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 support@webflow.com, but the Webflow Forum is usually a good bet!
why there is no navbar-setting in my website, did you guys changed its place or what?
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 😀
Can I add a third menu like a filter under the submenu?
Yes. You can add a dropdown menu within another dropdown menu.
@@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?
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??
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.
Does anyone know why my dropdown menu from the navigation button hides below the content of the page? thanks
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!
try playing around with the z-index
When I create a class it doesnt save
Mobile menu not closing on external/internal link
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
Never looked at a hamburger like that before. Bun - Protein - Bun. Cheers
How did you guys get John Mulaney to do your tutorial videos?
I wanna consume a nav bar rn lolol
What about mega menu?
This past live stream may help you with this: ruclips.net/video/MSZPgv-pZwc/видео.html
Sticky navbar doesn't collapse in mobile mode.
I'd like to consume a Nav Bar please
Why are you using a mouse and a trackpad?
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.