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!
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
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!
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!
@@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
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!
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
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!
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!
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.
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!
brother thank you so mych this is what I was looking for so long time, very useful and very to the point, thank you, it is amazing explanation, keep uploading tutorials like this man, this is super useful to the point thanks brother
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.
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
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.
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
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.
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.
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?
@@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!!
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
@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
How do I make sure that the nav closes and the animation plays whenever a user clicks on a link? Do I have to create a custom animation for every type of interaction?
Great question you can make the close animation once and assign it to affect the class. So just have the links with the same class and have the interaction affect that class.
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
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.
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?
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!
I encounter an issue when I open the menu on phone and then scroll down the logo and menu btn both go up with the page. I don't want to make my navbar sticky because it doesn't work with my design... Any solutions?
You could make the menu sticky but not scrollable by using custom code. So when the user taps on the hamburger icon the page (ie Body) is not scrollable. That is what I can think of immediately. Let me know if you want a tutorial.
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 :/
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!
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
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 😂😂
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
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
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!
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!
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
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!
Searched a few days to find a video like this one. You the only one who teached this right!
Thanks Dave!
There are many ways to do things this is just one way. Just keep that in mind.
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.
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 :)
Thanks for the tutorial. I watched it at least twice. Will watch it once more maybe before building my own navbar 😊
Just starting out with Webflow & i found this tutorial incredibly informative and helpful. Thank you Derek!
Awesome glad it helped :)
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.
Thank you for your video! Very easy to understand and apply. Following!
Awesome glad it helped Carolina!
Truly incredible how well you explain things. Thank you so much for covering this! Exactly what I needed to learn.
@cheese22 Awesome glad you liked my explanation.
Fantastic work. I'm getting a refresh as i haven't used webflow in 2 years. Thank you
Get back on that horse! Hehe
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 :)
Thanks man, we are working with Webflow on university, and I wanted to do this so bad! Thanks!
Glad it was helpful! Webflow university is a fantastic tool btw
Best tutorial I found ever!
Wow, thanks!
Hey Derek, thanks for the easy tutorial. Much appreciated. You just earned yourself another like and subscriber.
Thanks Sir 🎩
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 !
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 God, you helped me soooo muuch. Love it
I have searched for it, so long how to do this and now i found it. You are the best
Glad I could help! Haha I can relate to your struggle when I first got into Webflow!
Looking forward to seeing your growth and revelations!
- Derek
I have done mine. it's perfectly working.
@rakibhossainea Such a great feeling eh :)
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!
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 Derek!
You explain it very well and easy to understand. keep the fire burning!
Thanks Dennis!
Super helpful tutorial, thanks so much! Easy to understand, quick and to the point, great job 🙏
Glad you enjoyed it!
This was insanely helpful, thank you a ton.
Excellent video, direct and to the point--thank you for sharing!
man you are a beast. good job!
Thanks Max, glad you found value.
Thanks for shearing and teaching ;)
Thanks for watching!
Great explanation an awesome content. Can't wait to see more Webflow tutorials :)
Thanks - keep an eye out more vid to come!
brother thank you so mych this is what I was looking for so long time, very useful and very to the point, thank you, it is amazing explanation, keep uploading tutorials like this man, this is super useful to the point thanks brother
Thanks for the comment brother! Glad you found it helpful.
Fantastic! Thank you for this very clear tutorial. Great work. Thanks!
No worries, glad you found it helpful Mike :)
Super awesome tutorial. Not lengthy boring tutorial. Thanks for sharing 😊
Thanks for watching and commenting 🙂
Thanks bro, great tutorial. It was very easy to follow.
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.
Thanks for the video!! Really helpful Derek
Glad it was helpful!
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 :)
Thank you so much for the great tutorial
You are so welcome!
This was very helpful
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
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.
This is so great and helpful. Thank you very much!
Perfect explanation!
Great tutorial, found this very helpful! 👍
Thanks Joyce
What a VIDEO!! Thank you so much man!
Glad it helped!
Thank you so much for the tutorial ❤❤
Thanks, Ajith - Glad you found value!
Thanks for making me understand
Happy to help - thanks for understanding.
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!
Very good video mate thank you.
Glad you enjoyed it
Amazing, thank you so much, you really helped me wrap my mind around how this works.
Great to hear!
hey man, thank you, great tutorial! wondefully explained and to the point!
Glad you liked it!
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.
very good brother
Thank you so much 😀
Great tutorial keep it up!
Very good tutorial
Glad you liked it
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.
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.
thanks for sharing! great resource
My pleasure!
Great video, thank you !
You are welcome!
damn bro this is super valuable and useful, thank you and mad props
Thank you!
This is super excellent ❤
Glad you found value!
dude this was realy good
Glad you liked it
Fantastic
Wonderful. Pleas more. Thank you
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
@@SheenaTarrant Nice glad you found the reasoning yourself - that is the trait of a developer ;)
Great job, THX
Thanks for watching and commenting!
really explained nicely👍
that helped so much, thanks!
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!
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!!
You're a legend
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
Awesome vid! Thanks a lot!
Glad you liked it!
Thank you so much!
Glad it helped!
Awesome !
Bro amazing video
Thanks
@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 🫡
Cracking video. Thank you.
Thanks for the cracking comment!
amazing!
Thank you! Cheers!
How do I make sure that the nav closes and the animation plays whenever a user clicks on a link? Do I have to create a custom animation for every type of interaction?
Great question you can make the close animation once and assign it to affect the class.
So just have the links with the same class and have the interaction affect that class.
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
Great job, thanks
Thanks for watching!
mate... LEGEND
Thanks for watching MATE!
Lifesaver honestly. I’m here chanting SIUUUUU everywhere I go 👊
Please keep the Navigator bar open while you work, it would make it so much easier to follow along
Noted! - Thanks for the feedback.
Thanks a lot brother
Always welcome
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.
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!
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!
I encounter an issue when I open the menu on phone and then scroll down the logo and menu btn both go up with the page. I don't want to make my navbar sticky because it doesn't work with my design... Any solutions?
You could make the menu sticky but not scrollable by using custom code. So when the user taps on the hamburger icon the page (ie Body) is not scrollable.
That is what I can think of immediately. Let me know if you want a tutorial.
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 :/
thank you!
You're welcome!
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!
Cool Thank you! Suscribed 👍
Very very helpful thanks so much 😂😂
Happy to help 😂😂 (not sure why we put laughing emoji, but back at you haha)
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