Basic Custom Navbar tutorial in Webflow

Try Webflow here: webflow.grsm.i...
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.
For more value please visit:
www.dereksiu.c...
📢 Connect With Me
Website: www.dereksiu.c...
Fiverr: www.fiverr.com...
👇 Helpful Links:
Hire a Freelancer on Fiverr:
fiverr.grsm.io...
Want to record a video like this? Try Tella:
tella.tv/?via=...
Intro:
00:00
Example sites:
00:05
Webflow Walkthrough:
01:20
Closing Remarks
17:15
--
#Webflow #WebflowTutorial #NavbarDesign #CustomNavbar #WebDesign #WebDevelopment #WebflowTips #ResponsiveDesign #WebsiteNavigation #UIDesign #UXDesign #WebflowBeginners #NoCode #WebsiteDesign #WebflowExperts

[@pbnjae]

This is such an undervalued channel... Your style of tutorial is so freaking easy to follow

[@dereksiuau]

Thank you - this means a lot! Glad you found value

[@PabG77]

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!

[@dereksiuau]

Glad it helped!

[@streetsofafrica8445]

Exactly!

[@justinluethke]

yesshh! you're right.. they are just patching things together.. cheating around with padding and stuff and they ignore premise webdesign principles

[@pbnjae]

SAME !!!!! Like just build the damn thing and leave the reasoning for me to deal with 😂😂

[@JUJU-bc6wm]

This video is so much better than the official step-by-step guide. Thank you so much, Derek! I was completely lost before watching this.

[@dereksiuau]

Cheers for the kind words, I appreciate it!

[@1VitaliyStep]

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]

Thanks glad it helped - if you have any video suggestions please do comment :)

[@1VitaliyStep]

@@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

[@karlosortiz8104]

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

[@BaslielAmare]

Amazing tutorial, love the focus on teaching and making it straight forward. This didn't feel like 17 minutes.

[@dereksiuau]

Great to see you found value and how time just went by. Apprecaite your comment and feedback.

[@jirowang110]

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

[@dereksiuau]

Glad you found it helpful!

[@streetsofafrica8445]

Okay, this video is so valuable...it deserves more views. Thank you very much, Derek.

[@dereksiuau]

You're very welcome!

[@streetsofafrica8445]

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

[@CarolinaPereira-kw8rw]

Thank you for your video! Very easy to understand and apply. Following!

[@dereksiuau]

Awesome glad it helped Carolina!

[@Alfie501]

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!

[@dereksiuau]

Awesome stuff Alfie! Look forward to seeing what you build!

[@Syndeer]

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!

[@dereksiuau]

Glad I could help! And glad you overcame the struggle.

[@bilal100]

Thanks for the tutorial. I watched it at least twice. Will watch it once more maybe before building my own navbar 😊

[@niklaszwattendorfer]

Searched a few days to find a video like this one. You the only one who teached this right!

[@dereksiuau]

Thanks Dave! There are many ways to do things this is just one way. Just keep that in mind.

[@spa-asmr]

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!

[@dereksiuau]

Thank you for subscribing and the kind words! Looking forward to sharing more videos.

[@melodyxjoon]

Straight to the point! I was able to troubleshoot my own problem on webflow because of this tutorial. Thank you!!

[@dereksiuau]

Awesome, must be a good feeling troubleshooting your own problem :)

[@lobbwav]

Just starting out with Webflow & i found this tutorial incredibly informative and helpful. Thank you Derek!

[@dereksiuau]

Awesome glad it helped :)

[@ruthrajan6878]

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!

[@dereksiuau]

Wow, thanks for this super praise. Appreciate it and glad you found it helpful and easy to understand :)

[@cheese22]

Truly incredible how well you explain things. Thank you so much for covering this! Exactly what I needed to learn.

[@dereksiuau]

@cheese22 Awesome glad you liked my explanation.

[@seixinhas]

Thanks man, we are working with Webflow on university, and I wanted to do this so bad! Thanks!

[@dereksiuau]

Glad it was helpful! Webflow university is a fantastic tool btw

[@kayso1799]

Fantastic work. I'm getting a refresh as i haven't used webflow in 2 years. Thank you

[@dereksiuau]

Get back on that horse! Hehe

[@samindaranawaka6814]

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!

[@dereksiuau]

Thanks Saminda, Look forward to sharing more in the future!

[@andreiconx]

Hey Derek, thanks for the easy tutorial. Much appreciated. You just earned yourself another like and subscriber.

[@dereksiuau]

Thanks Sir 🎩

[@kingofunique]

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.

[@dereksiuau]

Thanks! Glad you found the lottie hamburger usefull too!

[@WEILERKIMO]

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

[@dereksiuau]

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

[@Med_Taha_Designs]

Best tutorial I found ever!

[@dereksiuau]

Wow, thanks!

[@10XbigGERDigital]

Awesome video! My nav is finally sorted after hours of trial and error. Thanks a ton!

[@dereksiuau]

Ah yes the hours of trial and error is only sharpening your Webflow skillset keep up the great work!

[@simoncote4064]

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 !

[@dennisantonio8718]

You explain it very well and easy to understand. keep the fire burning!

[@dereksiuau]

Thanks Dennis!

[@jonathannavarrete9162]

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

[@dereksiuau]

Thanks for the comment brother! Glad you found it helpful.

[@alzibaba]

Super helpful tutorial, thanks so much! Easy to understand, quick and to the point, great job 🙏

[@dereksiuau]

Glad you enjoyed it!

[@dynerushd7517]

Great explanation an awesome content. Can't wait to see more Webflow tutorials :)

[@dereksiuau]

Thanks - keep an eye out more vid to come!

[@alxcobb]

such amazing content man! I really have a better understanding of building custom navigation now :)

[@dereksiuau]

Great to hear! Glad you found this insightful and helpful, keep up the great work sir :)

[@younessegi1094]

Great job Derek!

[@kenlamb4430]

Excellent video, direct and to the point--thank you for sharing!

[@nastasiacr3676]

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.

[@dereksiuau]

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!

[@mikehelfenbein3742]

Fantastic! Thank you for this very clear tutorial. Great work. Thanks!

[@dereksiuau]

No worries, glad you found it helpful Mike :)

[@maxh.2293]

man you are a beast. good job!

[@dereksiuau]

Thanks Max, glad you found value.

[@rakibhossainea]

I have done mine. it's perfectly working.

[@dereksiuau]

@rakibhossainea Such a great feeling eh :)

[@thomasanderson2551]

This was insanely helpful, thank you a ton.

[@akbarbadsha25]

Super awesome tutorial. Not lengthy boring tutorial. Thanks for sharing 😊

[@dereksiuau]

Thanks for watching and commenting 🙂

[@DavidGarcia-xj2yf]

What a VIDEO!! Thank you so much man!

[@dereksiuau]

Glad it helped!

[@jorgoskatsimitsoulias8918]

hey man, thank you, great tutorial! wondefully explained and to the point!

[@dereksiuau]

Glad you liked it!

[@Haweel]

Thanks bro, great tutorial. It was very easy to follow.

[@markusk7738]

This is so great and helpful. Thank you very much!

[@joyce_ofoche]

Great tutorial, found this very helpful! 👍

[@dereksiuau]

Thanks Joyce

[@bleeblaabloo]

Thanks for the video!! Really helpful Derek

[@dereksiuau]

Glad it was helpful!

[@taten_da]

Amazing, thank you so much, you really helped me wrap my mind around how this works.

[@dereksiuau]

Great to hear!

[@banders-ralfs]

Thanks for shearing and teaching ;)

[@dereksiuau]

Thanks for watching!

[@ninefromsalad]

Thank you so much for the great tutorial

[@dereksiuau]

You are so welcome!

[@beta_byte]

damn bro this is super valuable and useful, thank you and mad props

[@dereksiuau]

Thank you!

[@tomwdesign]

Very good video mate thank you.

[@dereksiuau]

Glad you enjoyed it

[@garrettjohnlawmusic]

Great tutorial keep it up!

[@wintarinspace3900]

This was very helpful

[@albertom.288]

Perfect explanation!

[@LokeshKaushish]

thanks derek can you pls bring a video in which you tell how should a begginer proced with webflow

[@dereksiuau]

This is a great idea I plan to do this in the future so stay tunned.

[@Ajithkumar-it8bu]

Thank you so much for the tutorial ❤❤

[@dereksiuau]

Thanks, Ajith - Glad you found value!

[@spectre3492]

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?

[@dereksiuau]

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

[@spectre3492]

@@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.

[@markushedin1209]

dude this was realy good

[@dereksiuau]

Glad you liked it

[@pedropacheco6876]

Very good tutorial

[@dereksiuau]

Glad you liked it

[@Astendor]

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?

[@dereksiuau]

Great question, you can add a custom code that will make the BG (Body) nonscrollable on menu click. Here is a tutorial on that: kzbin.info/www/bejne/oWjMY4aDlLeMiKc

[@KenneDei-u9u]

This is super excellent ❤

[@dereksiuau]

Glad you found value!

[@jiraya4944]

Great video, thank you !

[@dereksiuau]

You are welcome!

[@destinysaid]

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

[@dereksiuau]

I agree with your statement!

[@porushpuri]

thanks for sharing! great resource

[@dereksiuau]

My pleasure!

[@gabrielr8311]

Thank you so much, this is amazing i was getting irritated not being able to manually code and the presets bring so bare boned

[@dereksiuau]

Glad it helped!

[@vitaliiustymenko9301]

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.

[@dereksiuau]

Fantastic point noted moving forward.

[@philwiles]

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

[@dereksiuau]

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.

[@OrlandoDelgadilloLuna]

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.

[@aathithya4997]

Thanks for making me understand

[@dereksiuau]

Happy to help - thanks for understanding.

[@MsLana555]

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]

Is this because your website is a one-page landing page (not multiple pages).

[@MsLana555]

@@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!!

[@dereksiuau]

AWesome!

[@majidraonazeer]

very good brother

[@dereksiuau]

Thank you so much 😀

[@sudhanshupawar1516]

really explained nicely👍

[@bigZitronenschale]

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?

[@dereksiuau]

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.

[@kimberleealexandria-day6886]

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.

[@dereksiuau]

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.

[@datmanUK]

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?

[@dereksiuau]

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

[@jadenmagleby5241]

Do you have a video like this but instead of move do opacity?

[@dereksiuau]

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!

[@justinluethke]

that helped so much, thanks!

[@MezTech-r4v]

Siu. How do you that amazing video background with words on top?

[@dereksiuau]

Are you referring to a Webflow site? Or you referring to the video itself where it has the text moving? Please advise, perhaps send me timestamps

[@fettystudio]

Great... but when i click on the nav link the menu icon does not change back to default

[@dereksiuau]

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!

[@juleonasefi8559]

Awesome vid! Thanks a lot!

[@dereksiuau]

Glad you liked it!

[@ManuelaBarthelmae]

Wonderful. Pleas more. Thank you

[@RAM_Krish_InfoTech_2025]

@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.

[@dereksiuau]

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

[@RAM_Krish_InfoTech_2025]

@@dereksiuau Thanks a lot, Derek 🫡

[@MahleMakhanya]

Bro amazing video

[@dereksiuau]

Thanks

[@Sheenabeepboop]

Excellent Tutorial! I'm confused why your container appears so small when its given a max width of 800px ?

[@Sheenabeepboop]

Ahh its because your section class is flexbox with settings applied hehe ! I'll leave this for anyone else questioning this

[@dereksiuau]

@@Sheenabeepboop Nice glad you found the reasoning yourself - that is the trait of a developer ;)

[@98Nedeljko]

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?

[@dereksiuau]

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.

[@crimez9191]

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?

[@dereksiuau]

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.

[@crimez9191]

@@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 :/

[@dsbeats_rap_beatz]

Great job, THX

[@dereksiuau]

Thanks for watching and commenting!

[@mattm7426]

You're a legend

[@ps-gq5km]

Please keep the Navigator bar open while you work, it would make it so much easier to follow along

[@dereksiuau]

Noted! - Thanks for the feedback.

[@quentinjames981]

mate... LEGEND

[@dereksiuau]

Thanks for watching MATE!

[@quentinjames981]

Lifesaver honestly. I’m here chanting SIUUUUU everywhere I go 👊

[@rockstarsunlimitedltd]

Cracking video. Thank you.

[@dereksiuau]

Thanks for the cracking comment!

[@weaaVes]

Thank you so much!

[@dereksiuau]

Glad it helped!

[@chimeziemartins6796]

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?

[@dereksiuau]

You will need to add the "Close Nav" interaction to the nav link (ideally class so it affects all of them). Let me know!

[@felikowski]

amazing!

[@dereksiuau]

Thank you! Cheers!

[@mahtanickbakht]

Fantastic

[@isaacjones1213]

How are you doing the search just by clicking in the section? I can’t figure that out

[@dereksiuau]

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 :)

[@abdullahafridift6989]

Thanks a lot brother

[@dereksiuau]

Always welcome

[@lautarofuentes1445]

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?

[@dereksiuau]

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

[@tjveach]

Great job, thanks

[@dereksiuau]

Thanks for watching!

[@benrose47]

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!

[@dereksiuau]

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