Basic Custom Navbar tutorial in Webflow
ฝัง
- เผยแพร่เมื่อ 27 ก.พ. 2023
- Try Webflow here: webflow.grsm.io/4brsncjjm7ge
In this video tutorial, I’ll guide you step-by-step through the process of building (from scratch) a basic custom navbar in Webflow. By following along and understanding the premise, you'll be easily able to create a professional-looking navbar that perfectly complements your site's design.
Intro:
00:00
Example sites:
00:05
Webflow Walkthrough:
01:20
Closing Remarks
17:15
My Website:
www.dereksiu.com.au/
Dude you're just amazing, you should upload videos more often you don't have any idea of how much value you bring with these videos
I'm very familiar with HTML, CSS, JS etc and I was really hating webflow official tutorials (felt like wasting time), this is exactly what I needed to better understand webflow and how to do all the things I know how to do in code but not on webflow. So simple!
Glad it helped!
Exactly!
yesshh! you're right.. they are just patching things together.. cheating around with padding and stuff and they ignore premise webdesign principles
SAME !!!!! Like just build the damn thing and leave the reasoning for me to deal with 😂😂
Thank you ! Im new to web flow and this video answered all questions I had surrounding navbars. I hope you will continue to upload new videos !
Thanks for the tutorial. I watched it at least twice. Will watch it once more maybe before building my own navbar 😊
Great work Derek! I appreciate this no-nonsense and concise tutorial very much! You explain the reasons behind the decisions, which I find extremely helpful. Looking forward to your upcoming tutorials!
Thanks Saminda,
Look forward to sharing more in the future!
Great job Derek!
This was insanely helpful, thank you a ton.
Excellent video, direct and to the point--thank you for sharing!
Thank you so much for this video! I see a bunch of videos saying that it's better to custom make your own navbar, but no one ever talks about how to make it responsive
Glad you found it helpful!
This is so great and helpful. Thank you very much!
You're a legend Derek! Its nice to fully understand this at last. I was always using the native one but now my nav bars no longer have to suck! Thanks!
Awesome stuff Alfie! Look forward to seeing what you build!
This is such an undervalued channel... Your style of tutorial is so freaking easy to follow
Thank you - this means a lot! Glad you found value
Okay, this video is so valuable...it deserves more views. Thank you very much, Derek.
You're very welcome!
Hi derek, pls do you know anything about adding facebook pixels to webflow website? Most youtube videos on that only talks about adding the pixel ID. I want to add PageView pixels to certain pages. This is very very important@@dereksiuau
Man I was really struggling to make a nav bar and this tutorial is a gold mine thanks for uploading! Got a thumbs for great work!
Glad I could help! And glad you overcame the struggle.
Just subscribed to say thanks for these amazing tutorials. As everyone else has said these are the best by far, easy to understand, and you show where everything is on the dashboard. Looking forward to more videos!
Thank you for subscribing and the kind words! Looking forward to sharing more videos.
Just starting out with Webflow & i found this tutorial incredibly informative and helpful. Thank you Derek!
Awesome glad it helped :)
Fantastic work. I'm getting a refresh as i haven't used webflow in 2 years. Thank you
Get back on that horse! Hehe
Fantastic! Thank you for this very clear tutorial. Great work. Thanks!
No worries, glad you found it helpful Mike :)
Great tutorial, keep them going. Was looking for a video on how to create the navbar from scratch and also thank you for showing the essential hamburger button as well.
Thanks! Glad you found the lottie hamburger usefull too!
Thank you for your video! Very easy to understand and apply. Following!
Awesome glad it helped Carolina!
Hey Derek, thanks for the easy tutorial. Much appreciated. You just earned yourself another like and subscriber.
Thanks Sir 🎩
Straight to the point! I was able to troubleshoot my own problem on webflow because of this tutorial. Thank you!!
Awesome, must be a good feeling troubleshooting your own problem :)
Thank you a lot man! Webflow has a bunch of tutorials but only yours helped me to understand how it works, step by step. Thank you a lot. It would be interesting to see more videos from you!
Thanks glad it helped - if you have any video suggestions please do comment :)
@@dereksiuau Actually it would be interesting to see something practical, how to create and use repeatable components, how to deal with Blog and CMS elements. For me as a beginner, it is super interesting to see how you work, all these hotkeys and other stuff that can come after long use of tool. Thx
Perfect explanation!
that helped so much, thanks!
Super helpful tutorial, thanks so much! Easy to understand, quick and to the point, great job 🙏
Glad you enjoyed it!
Thanks bro, great tutorial. It was very easy to follow.
Super awesome tutorial. Not lengthy boring tutorial. Thanks for sharing 😊
Thanks for watching and commenting 🙂
Great explanation an awesome content. Can't wait to see more Webflow tutorials :)
Thanks - keep an eye out more vid to come!
Thank you so much for the tutorial ❤❤
Thanks, Ajith - Glad you found value!
hey man, thank you, great tutorial! wondefully explained and to the point!
Glad you liked it!
This was very helpful
Amazing, thank you so much, you really helped me wrap my mind around how this works.
Great to hear!
Thank you so much for the great tutorial
You are so welcome!
Great tutorial, found this very helpful! 👍
Thanks Joyce
such amazing content man! I really have a better understanding of building custom navigation now :)
Great to hear! Glad you found this insightful and helpful, keep up the great work sir :)
man you are a beast. good job!
Thanks Max, glad you found value.
You explain it very well and easy to understand. keep the fire burning!
Thanks Dennis!
Very good video mate thank you.
Glad you enjoyed it
damn bro this is super valuable and useful, thank you and mad props
Thank you!
Awesome video! My nav is finally sorted after hours of trial and error. Thanks a ton!
Ah yes the hours of trial and error is only sharpening your Webflow skillset keep up the great work!
Thanks for shearing and teaching ;)
Thanks for watching!
Thanks for the video!! Really helpful Derek
Glad it was helpful!
What a VIDEO!! Thank you so much man!
Glad it helped!
wow. your videos are so much better than the content webflow puts out themselves (never clicks with me for some reason). this was so incredibly clear and helpful! thank you so much!
Wow, thanks for this super praise. Appreciate it and glad you found it helpful and easy to understand :)
Awesome vid! Thanks a lot!
Glad you liked it!
thanks for sharing! great resource
My pleasure!
Great video, thank you !
You are welcome!
Great tutorial keep it up!
You're a legend
Wonderful. Pleas more. Thank you
This was amazing! Thank you so much for taking the time to make this tutorial and explain everything so throroughly.
One small suggestion, IDK if it would also be helpful for others, but I personally am a very visual learner, and webflow can sometimes get confusing, so for me it would help a lot if your navigator was open so that we could see what you're selecting each time.
Great suggestion! Noted. Please note that the layer can also been seen at the bottom right of the screen / corner. But I understand what you are saying.
Thanks for the feedback!
Great job, thanks
Thanks for watching!
Cracking video. Thank you.
Thanks for the cracking comment!
Fantastic
Great job, THX
Thanks for watching and commenting!
Awesome !
Thank you so much!
Glad it helped!
Thanks for making me understand
Happy to help - thanks for understanding.
This is super excellent ❤
Glad you found value!
Cool Thank you! Suscribed 👍
Very good tutorial
Glad you liked it
dude this was realy good
Glad you liked it
So cool
thank you!
You're welcome!
Thanks a lot brother
Always welcome
Perfect thanks
You're welcome!
Thanks for this, the official webflow tutorial just has you using a prebuilt nav bar.
In my experience learning to use templates without learning the basics leads to poor developers and designers overall
I agree with your statement!
Thank you so much, this is amazing i was getting irritated not being able to manually code and the presets bring so bare boned
Glad it helped!
Bro amazing video
Thanks
Thanks!
Your Welcome!
Very very helpful thanks so much 😂😂
Happy to help 😂😂 (not sure why we put laughing emoji, but back at you haha)
mate... LEGEND
Thanks for watching MATE!
Lifesaver honestly. I’m here chanting SIUUUUU everywhere I go 👊
just made u 940 loved the vid
thanks derek
can you pls bring a video in which you tell how should a begginer proced with webflow
This is a great idea I plan to do this in the future so stay tunned.
Amazing explanation, thank you very much. One question left: When i open the menu on my phone, i can scroll in the background... How do i prevent that?
Great question, you can add a custom code that will make the BG (Body) nonscrollable on menu click. Here is a tutorial on that:
th-cam.com/video/k7i2SM_RYRE/w-d-xo.html
Thank you so much for this. Quick question: how did you get the container within the "section" (the div that you changed to the section class" to be centered and a box? I'm having trouble figuring that out because while it's step by step, it's a little fast and felt some steps were skipped. Thanks so much.
There are many ways to do this, one of the way is to set the container to have auto left margin and auto right margin. Another way would be to set the parent container "section" to flex align centre.
While I love the official Webflow tutorials, their navbar one only covers to use their prebuilt option instead of teaching you how to build one from zero. Thank you so much for this.
thanks for making the tutorial, never would be able to figure this out on my own. lots of steps to make a simple menu. how would i create a menu item with nested items and show that in the desktop menu and mobile menu?
Glad you figured it out and good to see your mind is turning into a developer even the simplest of navbars takes quite some work to build. Can you clarify what you mean by menu item with nested items - perhaps providing an example?
I can assit better once that has been answered :D
@@dereksiuau yep so I'm talking about having a dropdown menu for the desktop version, and then a slideout menu for the mobile version for a parent menu item. I have "UX Design" as my main menu item, and then I want to list 3 projects underneath that menu item. When I hover it on desktop, it would fade in as a dropdown menu and then when I tapped it on mobile it would slide out.
I figured out how to add the dropdown menu on desktop but I don't know how to convert it to a slideout menu on mobile. I'm also trying to figure out how to fade the dropdown menu in. I selected the dropdown element in webflow, went to interactions and selected "Dropdown menu", and when I set it to fade it also fades out the "UX Design" menu item and the arrow. I don't know how to get it to only fade out the dropdown menu because it doesn't let me select that class specifically. So there's 2 problems here I'm still trying to solve.
The Tutorial is really good, thank you! It's important to note that the Navigator panel is not shown in the video, but it's a crucial part of the structure and should be understood, especially by juniors.
Fantastic point noted moving forward.
Hi, awesome tutorial, found it really easy/useful Only question I have is... is it possible to create the animation for the Hamburger Menu without using a Lottie Anmiation? Really struggling and just want a static Hamburger menu graphic
Yes sir you can! You can replace the lottie file with a static image or div blocks then animate that.
The lottie essentially has the animation built in so you will just need to create your own using Webflow interactions. Hope that makes sense.
Excellent Tutorial! I'm confused why your container appears so small when its given a max width of 800px ?
Ahh its because your section class is flexbox with settings applied hehe ! I'll leave this for anyone else questioning this
@@user-qi3rw6sm5w Nice glad you found the reasoning yourself - that is the trait of a developer ;)
Hey Derek, fantastic video but one question. Everything is working great but the navbar only seems to render at like 60% of the viewport (and the logo scrunches up to half width when you scroll) on iphones. It works normally in the web viewer and on android. Any idea what I might have done wrong? Thanks again and great work!
I suspect the logo is not rendering properly on iphone because it does not have a defined height and width - if filled in blank it can cause issues on IOS so make sure to at the very least have "auto" on any undefined height or width.
Let me know if that works. As for the navbar rendering 60% of the viewport - make sure that on Webflow go to the smallest breakpoint on mobile 320px and make sure all the items fit the nav and doesn't go over.
- Derek
Thank you for the video. I'm creating a similar Navbar, but my problem is the Lottie opens on 1st click and closes on 2nd click. After 2nd click it doesn't react. Any ideas what might be wrong?
Is this because your website is a one-page landing page (not multiple pages).
@@dereksiuau That might have been the problem in the beginning. Once I had more pages, I followed your video step by step and now it works! Thank you!!
I have just tried this, when I make a new div block for container it is full screen, but you have a small block in the middle Do you think Webflow has changed since then?
Based on your description I had the "new div block for container" to have a max width eg. 1650px with 100width and make sure to put the left and right margin to be auto (that is how it will be centred).
So by default everything will be placed on the top right so you have to define it. And no nothing has changed in Webflow haha this is just fundamental HTML / CSS.
I hope this helps :)
- Derek
@dereksiuau: How have you been able to add elements via search shortcuts in NAV Div? Kindly add shortcuts instruction also, it may become easier for the users to index all elements. Thanks for the help.
Command (or Control) Shift E - opens up quick search.
Then you can type what you want eg. Div then hit enter. Tat is what I typically do.
Extra tip: I hit Command (or control) space to write a class.
- Derek
@@dereksiuau Thanks a lot, Derek 🫡
Nice Video! I have a question, if i click on any nav link in mobile view, the nav menu refuses to close, I have to tap on the hamburger again for it to close, how can I fix that?
You will need to add the "Close Nav" interaction to the nav link (ideally class so it affects all of them).
Let me know!
I am new to webflow and was wondering what is the shortcut for adding the "div" I am unable to edit the code directly is it because of the plan I have?
With a Webflow free plan, you should have all the functionalities just that you can't create more than 2 pages or apply the embed (custom code) functionality.
You should definitely be able to place a"div" block, just head over to the plus icon on the left hand panel and drag the div component to the canvas or just click on the icon and it will add it as well :)
Another way is to quick search cmd + shift + e then type in div and click enter (that is the shortcut way I use)
- Derek
Great... but when i click on the nav link the menu icon does not change back to default
I'm assuming your nav link takes you to a section on the page rather than a separate page. If this is the case:
You want to add the "close NAV" interaction to the nav link class.
LMK how it goes!
How do I make exactly like this but when navbar is in fullscreen i want to scroll the content inside the navbar if it has many menu items? (right now you scroll the background) a great example would be imdb navbar which has a lot of items inside of it
Set - Overflow to "Auto" this would make a scroll bar if the content exceeds the screen.
@@dereksiuau alright great will try that, will this also eliminate the scroll of the content behind it?
Do you have a video like this but instead of move do opacity?
Hey Jaden, thanks for watching commenting. If you want to do the opacity method just replace the "move" (-100% > 0%) with "opacity" (start: 0% to 100%).
Hope that helps!
when i put a section link behind the texts in the nav bar, the nav bar doesnt close.
How can i fix it? Do i have to put an extra animation behind all the text links, so when i klick it, the nav bar closes?
If I understand this correctly, when the navbar is open and user clicks on a navlink you want the navbar to close after the link is pressed, then yes you want to add the animation "Nav Close" to that link.
The reason I didn't do it in the tutorial is because you don't need to close the nav if the links takes you to another page. But if you want it to remain on the page then do the above :)
Hope that helps and thanks for watching.
@@dereksiuau i tried to animate it in different ways with nav closed, „move“ animation, „show/ hide“ animation. But it doesn’t work. This is so essential for my website because if that doesn’t work, the home side is bad :/
How are you doing the search just by clicking in the section? I can’t figure that out
You mea the quick search? Which is CMD (or Control on Windows) + E
If this isn't it, please send me timestamp of the video and I'll let you know :)
Tnak you. Very usefull, but I think you should explain final step, interaction when click on navbar link - nav panel to go left -100% it is not problem, but lotte icon behavior in that situation needs some explanation. I have problem with that.
Sure thing! With the lottie it's just using keyframes (percentages). If you need more direction, please clarify perhaps with timestamp reference to the video.
@@dereksiuau I mean, I am not sure how to make everything to vork fine when click on some link when menu is opened ( FAQ, services...). You explained perfect everything in your video ( no problem with that), but that final step what after that,, what heppens when click the link.. How to do that interaction ? To hide menu on link click with proper behavior of lottie icon. I tried something but it's not working as it should.
What is the shortcut your using
Which one?
Z is for Layers
CMD E - For quick search
CMD Enter - For quick class naming
Replacing CMD with Control if on Windows
How would one have the logo centered with an odd amount of nav links?
Subbed btw. Great video for the rest!
With code / Webflow there are many ways to do this. The most common:
1/ Using Grid (three column): Left with 2 nav links, middle logo, right 2 nav links - as an example
2/ Using Flex Box (have three divs inside) and use flex to push them (left, centre, right) making sure the left and right have the same width.
Hope that answers your question :)
how does he get the componets so fast
hahaha what components are you referring to?
hello! How do you close the navbar once the user clicks on a link on mobile?
Hey Lisa, you want to put the "Close Nav" interation to the nav links.
@@dereksiuau would this be on the first or second click? I've tried apply9ing close nav but the animation doesnt seem to work on the links
@@lisayang9538 Yeah that's exactly the problem I noticed as well. Without the Option to tell webflow options like nav open / nav closed. You're stuck with first/second click option. Even if the links play the Menu Close animation, your next click on the menu will do nothing, because the lottie is already at zero and the menu closed, having you to do another click
@@lisayang9538 First click.
@@saschatribula2650 I see what you are trying to say, this happens in unique situations like a one-page landing page with links scrolling to the page sections. Do you have any suggestions to over come this?
The thumbnail is such a clickbait
The real question is..... Why in 2023 a video of 720p ... Dude... like... all content good but presentation not? Is like going to bed with an uggo because anyway feels the same. Works? maybe, but in TH-cam... not so much.
Hahaha - fair point. Will keep this in mind for future videos.