How to Use the Webflow Navbar to Make Award Winning Menus

if you want to build a mega nav full screen or one of those compact trendy menus then you need to understand how the webflow nav component actually works this isn't just another tutorial on how to recreate something I want to actually give you the tools necessary so you can make anything well any nav so you can make any nav [Music] I gotta say there's a ton of weird things about this component but I still think it's much better than building one from scratch just because it gets you up and running fast and there's all these features that makes your life much easier so we'll tear it apart and I'll show you where all the gotchas are all the things you think you understand but there's some webflow Voodoo going on in the background but first we need to understand how it all works so let's jump in okay so let's start by adding a navbar element a fresh one add elements this plus button and scroll all the way down until you hit Advanced under Advanced is where you'll find the navbar component click that and then right away it'll drop into your canvas and you'll you're greeted with this beautiful navbar settings if for some reason you accidentally close this out don't worry there's literally two different ways you can get to it one the easy access route as long as you have the navbar element selected you can hit this gear icon and it'll pop back up and you can kind of drag it around wherever you need it to go or your element settings by hitting D or clicking this gear icon over there and then scrolling down and then you'll see your navbar settings I typically like to go through this route but you know do you the very first thing you'll see is menu show and hide this just refers to default property or functionality of this nav bar that you're able to when you go down to tablet this fancy icon element over here appears if we go into preview when you click on it it'll drop down essentially uh the list of your nav items moving down here the type easing open easing close these are all interaction properties for what we're trying to do trying to be a pro at this nav component we are not going to be touching those we want to have full control just leave everything here default same with the menu fills page height disable scroll offset when fixed I normally just never touch those things there is a disabled scroll that I'll talk about at the end so stick around for that the last button that's associated to the navbar settings is absolutely pointless which is this add link button I'll be going over all of the different uh elements within this navbar component and you'll kind of see that the nav link is absolutely pointless that's all everything with the navbar settings all right let's open up the Navigator by clicking this button right here or hitting Z on your keyboard if you're a super pro like me but you'll see here is our navbar element and the very first thing that you see here is the wrapper for the entirety of the thing this is the the element that holds the tag navbar or nav and also the thing that as we saw earlier has access to all of these settings so just clicking that the other cool thing about this nav bar is if you have this one selected you're able to now have access to an element trigger called navbar open and this navbar opens um just means if you're if you have your menu button activated um you're now able to kind of control the different techniques and uh or interactions associated with that so looking through all of the default styles that this nav bar has it has position relative so I would recommend for any defaults that you do want to keep just um click it again just so it gets highlighted to Blue that way when you're kind of trying to figure out why an absolutely positioned element or something like that is keep keeps getting stuck somewhere you might need to figure out who has the relative positioning that it's referencing right the second element or property rather that the navbar comes with is this terrible background color hashtag DDD this one uh I don't know what design you're making that you want to keep this color but for the most part it is good to apply your background if you're gonna have a background to your nav to apply it here I think that's a pretty good logical place to put in right moving on into the second kind of element that we have here which is the container the container is a bit of a love-hate relationship that I have with this guy um that's because I used to add my different layout properties directly on this element which is a terrible idea actually and it's bad because uh Flex properties don't behave the same way that you would expect it to were you to just apply these different layout properties on a standard diff so let me quickly demonstrate that because it's kind of crazy so uh did block let's drop a div block here right and let's say we want something that there's a div on the left side like this brand div right here and then our menu icons are on the right side so we want them to be opposite each other right and the way you would normally do that is you would probably use flexbox for it right so let's actually add two divs in here so here's our div block and now our div block has two div blocks inside of it right so here's one two and then the parent div block is right there so we want this Dev block to be on the left side this one to be on the right side how do we do that normally you would do that in flexbox right um kind of like what we see here on the navigation selecting the parent div block if we set the display to flex and then justify to space between there you go that's what you have right super simple I mean it says it right here on the UI icon distribute it evenly from start to end so you would expect that in this container if I hit you know this guy and this guy that that would happen that's not what happened like what so now uh our container has kind of squished them and put them in the middle here for some reason and that's super annoying and you might be scratching your head and spending hours kind of like I did in the beginning uh trying to figure out what the hell is going on here right so now you're probably gonna be like oh let me set this to 100 uh right and then let me set it to a display and then maybe move it to the and then it's like why it still looks not what I want right so uh yeah this container is a bit of a pain um so what I recommend is keeping the container here uh because you can and what you would probably want is just to apply normal container type of uh you know properties to it I would recommend uh to just keep your containers simple and have this be where you actually set your max width and you Center the element in the viewport by setting margin autos on it right so I have pre-made classes I'm using client first so I have this class called container large I would apply that in here and now I have you know my Max width all set up if I do need to apply Flex or all these other things my recommendation is to add another div inside of this container large and then Nest everything in here that you want and then here I would then you know go ahead and like just name this I don't know nav layout or something right the next element is the brand literally the same as this element right here it just so happens to be fancy and have the word brand on it which is nice and typically best practice dictates that this would point to your home page that's kind of what you would do there and then you would put your logo directly in here the only thing is you have to remember that it is a link and so it's going to inherit whatever you have as your default link Styles other things about this it's set to position relative and actually the the biggest thing about this thing is that it's set to float it uses float so um float is kind of terrible and very outdated there's a very specific use case for float um and I don't even know if it's a debate these days but back in the day this is how we would do layouts it's just using floats and before that it was tables right so and Float was really kind of difficult to grasp um so anyways without going too into like history I would highly recommend to just set this to uh none or clear or just I guess don't float and then clear just double click that and set that To None that's all you really need to know do not float your elements please you know use flexbox use grid like we have better tools for that now and then the next thing I would probably do in some ways I would maybe you know make this brand div into a display block just so I have a little bit more control so that it's not kind of sliding in line onto things all right so moving down the next one is nav menu so this is the container when webflow does its magic and starts hiding things like we saw on tablet view all the items just disappeared well it's referencing this exact element right here the snap menu the biggest thing to note is that if for some reason you delete this you lose that functionality you can't just like add another div and call it whatever it was like nav menu or something and expect you know our fancy show and hide button to start working again You've Lost That functionality it has to be the exact element that came with this nav bar when you first dropped it in the other thing with this nav menu and I'll show you in a little bit so stick around um is that this is the thing that if you want to create full screen navigation experiences that you see on really cool Awards websites this is the thing that's going to get you there right so how you would do that just as a you know quick preview I suppose is you would set this nav menu uh to fixed and then make it full and then you can adjust your Heights and and all that good stuff of course set it to appear on desktop right away and then once you have it fixed you can go ahead and kind of like have it span the entirety of your website now you have a nav menu button so when I open this menu button boom there's our nav menu it's huge it's full screen it's awesome so more realistic examples of it is here in this great looking project by this person link below if you want to clone this they have their nav menu here and if I hit show it brings up this entire thing and this entire thing is uh you know the menu item or the nav menu div inside of nav menu are three completely useless things I hate these guys um so I guess if you just want a default webflow setup you can use them but they're so finicky because first of all they have these default styles of and they're in pixels so you don't want that they're in line so that's difficult and then also uh you know they're positioned relative uh yeah they just have all the stuff about them and I guess the nice thing is if you're just if you just have text links you can you have access you know when you have navbar selected again you have access to this to the ad link button but again like you can just drop links in here so there's I don't know they're just bad um if you wanted an icon next to this text you can't do that because this is a text link and not um not a link block so it's not like it can contain multiple things you can't convert it to a drop down the list goes on and on just my recommendation if you are trying to be a pro just go ahead and do this just hit the delete a bunch of times until you see them anymore but make sure you don't delete the nav menu we need the nav menu and then you know when you're ready and want to do things the right way you put in link blocks in here right and then in your link block you can put a text block um and then you could put a about page now you have proper things and you can style them control them do whatever you need to do um you know with them so nav links completely useless please delete them uh we don't need them let's get to the last element here the last element is the menu button which we keep seeing on our tablet view because that's where we have it set so there's some funny things about this menu button by default for some reason the display is none why is that that's strange I think that's a bug let's see yeah no it's set to none by default if uh you haven't hit it you know it's not showing on the desktop when you go to tablet it'll automatically set itself to block so that's great it comes with some padding so you'll want to change that so you're not stuck in this pixel value let's see what else here uh it has position relative and for some reason it's also position float um so you know don't do that remove the float please position things the standard way if you want sure use the float I suppose but if you're going to do that just make sure you double click into it so you know you've made it an awful mistake of using the float all right so I would recommend uh let's leave it afloat for the purpose of this tutorial I guess but um yeah don't use the flip the only other Default about this thing is this icon so this icon is an SVG which means it's uh and not only is it an SVG but it also has some values within the SVG that specifies it to have this property called color fill which means we can change the font color in here and it'll change the SVG color as well as the size of it so it's inheriting it from our typography Styles here but for the most part I would recommend removing this icon and replacing it with your own custom icon because these are really just meant to be placeholders the last thing about this button that's kind of wild is you can have multiple instances of this button and it will still work and that's really helpful for when you have like full screen Solutions like this and for some reason you want your close button to be somewhere else on the page so what you would do is you would grab your duplicated button and you would put it inside of your nav menu right now you have two buttons and let's make this button uh red for some reason just so we can see that it's different and then let's make this button just do is one for now let's make this one black but you see like uh let's even preview it um I can open and then close it from that button open it from this button close it from that button it totally works so that opens up a whole bunch of possibilities as far as triggering this interaction of revealing and hiding your nav menu and that's it those are all of our elements within the nav bar lots of stuff in there I think for the most part the biggest takeaways here be mindful of the default value set them all to either actual default which is either zero or static if it's a position but if you do want to keep that default value just double click in there have it turn blue just so you have a visual cue that there is a property in there otherwise it's pretty easy to miss with containers you want to add another div to do your layouts you don't want to do your actual laying out and moving things around that's strictly the container is strictly just for width and centering that width and the nav menu is where everything gets packed into and nav links are absolutely terrible and for some reason this whole thing is built with floats so you want to get rid of all your floats and that's a webflow nav component don't forget to subscribe I'm going to be putting out a bunch of tutorials creating all sorts of different types of navigations with interactions animations all sorts of cool stuff all right see ya

Channel: Miles Roxas

Views: 13,795

Keywords: nav menu, navbar, webflow menu, webflow nav menu, webflow navigation, webflow mega menu, webflow navigation bar

Id: -k2c-jfhoEs

Length: 16min 6sec (966 seconds)

Published: Sat Aug 12 2023