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.
Intro:
00:00
Example sites:
00:05
Webflow Walkthrough:
01:20
Closing Remarks
17:15
My Website:
www.dereksiu.c...

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

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

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

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

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

[@lobbwav]

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

[@dereksiuau]

Awesome glad it helped :)

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

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

[@bilal100]

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

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

[@Med_Taha_Designs]

Best tutorial I found ever!

[@dereksiuau]

Wow, thanks!

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

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

[@andreiconx]

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

[@dereksiuau]

Thanks Sir 🎩

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

[@akbarbadsha25]

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

[@dereksiuau]

Thanks for watching and commenting 🙂

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

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

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

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

[@thomasanderson2551]

This was insanely helpful, thank you a ton.

[@mikehelfenbein3742]

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

[@dereksiuau]

No worries, glad you found it helpful Mike :)

[@kenlamb4430]

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

[@banders-ralfs]

Thanks for shearing and teaching ;)

[@dereksiuau]

Thanks for watching!

[@maxh.2293]

man you are a beast. good job!

[@dereksiuau]

Thanks Max, glad you found value.

[@ninefromsalad]

Thank you so much for the great tutorial

[@dereksiuau]

You are so welcome!

[@joyce_ofoche]

Great tutorial, found this very helpful! 👍

[@dereksiuau]

Thanks Joyce

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

[@aathithya4997]

Thanks for making me understand

[@dereksiuau]

Happy to help - thanks for understanding.

[@markusk7738]

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

[@taten_da]

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

[@dereksiuau]

Great to hear!

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

[@ManuelaBarthelmae]

Wonderful. Pleas more. Thank you

[@jorgoskatsimitsoulias8918]

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

[@dereksiuau]

Glad you liked it!

[@wintarinspace3900]

This was very helpful

[@Haweel]

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

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

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

[@pedropacheco6876]

Very good tutorial

[@dereksiuau]

Glad you liked it

[@bleeblaabloo]

Thanks for the video!! Really helpful Derek

[@dereksiuau]

Glad it was helpful!

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

[@jiraya4944]

Great video, thank you !

[@dereksiuau]

You are welcome!

[@beta_byte]

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

[@dereksiuau]

Thank you!

[@porushpuri]

thanks for sharing! great resource

[@dereksiuau]

My pleasure!

[@albertom.288]

Perfect explanation!

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

[@mahtanickbakht]

Fantastic

[@weaaVes]

Thank you so much!

[@dereksiuau]

Glad it helped!

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

[@garrettjohnlaw]

Great tutorial keep it up!

[@abdullahafridift6989]

Thanks a lot brother

[@dereksiuau]

Always welcome

[@byrockstarempire]

Cracking video. Thank you.

[@dereksiuau]

Thanks for the cracking comment!

[@KenneDei-u9u]

This is super excellent ❤

[@dereksiuau]

Glad you found value!

[@MahleMakhanya]

Bro amazing video

[@dereksiuau]

Thanks

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

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

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

[@tjveach]

Great job, thanks

[@dereksiuau]

Thanks for watching!

[@jordanepellerin6684]

Cool Thank you! Suscribed 👍

[@jevgenisuija]

Thanks!

[@dereksiuau]

Your Welcome!

[@quentinjames981]

mate... LEGEND

[@dereksiuau]

Thanks for watching MATE!

[@quentinjames981]

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

[@othinielchigunwi]

So cool

[@RAM_Krish_InfoTech_2024]

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

@@dereksiuau Thanks a lot, Derek 🫡

[@Facts_Comm]

Very very helpful thanks so much 😂😂

[@dereksiuau]

Happy to help 😂😂 (not sure why we put laughing emoji, but back at you haha)

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

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

[@davvy6659]

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.

[@emilekoffi8085]

Awesome !

[@whiteswordwarrior9995]

How would one have the logo centered with an odd amount of nav links?

[@whiteswordwarrior9995]

Subbed btw. Great video for the rest!

[@dereksiuau]

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

[@7309TEO]

Perfect thanks

[@dereksiuau]

You're welcome!

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

[@Sc0rphionx]

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 KZbin... not so much.

[@dereksiuau]

Hahaha - fair point. Will keep this in mind for future videos.

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

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

[@majidraonazeer]

very good brother

[@dereksiuau]

Thank you so much 😀

[@CarolinaPereira-kw8rw]

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

[@dereksiuau]

Awesome glad it helped Carolina!

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

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

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

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

[@justinluethke]

that helped so much, thanks!

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

[@dsbeats_rap_beatz]

Great job, THX

[@dereksiuau]

Thanks for watching and commenting!

[@AnanduTS-k2g]

Please pin the layers panel for reference in next tutorials 😊😊

[@dereksiuau]

Noted. Sorry po

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

[@phannhieng3649]

Thank you

[@dereksiuau]

Welcome!

[@DavidGarcia-xj2yf]

What a VIDEO!! Thank you so much man!

[@dereksiuau]

Glad it helped!

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

[@tomwdesign]

Very good video mate thank you.

[@dereksiuau]

Glad you enjoyed it

[@Maayankaufman]

thank you!

[@dereksiuau]

You're welcome!

[@Ajithkumar-it8bu]

Thank you so much for the tutorial ❤❤

[@dereksiuau]

Thanks, Ajith - Glad you found value!

[@JonasSmithsz]

The thumbnail is such a clickbait

[@younessegi1094]

Great job Derek!

[@hotaru-ic5ut]

just made u 940 loved the vid

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

[@mattm7426]

You're a legend

[@dennisantonio8718]

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

[@dereksiuau]

Thanks Dennis!

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