Responsive navigation bar - Web design tutorial

Responsive navigation bar – Web design tutorial



there are many approaches to take when adding navigation to your project and one of the most common and powerful ways to do this is through a navigation bar or nav bar and as you can see on this page the nav bar gives the user a good top level view of the content the project on devices with less horizontal screen real estate the nav bar can also be configured to display a menu button which lets the user access that same navigation vertically we'll cover five aspects of the nav bar adding a nav bar to our project anatomy of a nav bar configuring the brand or logo on the nav bar building out navigation links and reusing the nav bar throughout our project of course the first step is adding the nav bar nav bar element is available from the same place we find all our elements our elements panel and it's located under components now as we're dragging it in it's helpful to glance over to the right at our navigator to determine where we're placing the nav bar we're putting it at the top of the page right in our body there's no right or wrong way to do this you can put it in a section in a container at the bottom of the page your choice you can also move the nav bar at any time it's self-contained and we'll take a much closer look at that right now in the anatomy of our default map our three main areas here we're going to look at one of them is invisible right now like this picture of a cloaked Klingon bird-of-prey the first area to the left is our brand placeholder this is a link block where we can put a logo or text or any other brand education that's to the left the second area to the right we have our nav menu that contains all our navigation links our nav links these usually link us to different pages or sections the third area the invisible one is the menu button and the reason it's invisible is because by default we don't see it until we get into tablet view go to tablet view now we can see and select the menu button back to our default view of course again it's invisible to us all this the brand link in the navigate our brand or logo in there a great way to do this is to simply use an image element from our elements panel we can drag an image element and drop it right inside the brand that link block we can drag to resize or we can even style the image or the brand link block in our style panel of core a common practice for the brand image or logo is to have it linked back to the home page now our image is still selected so we can quickly grab the brand link block by selecting the label and then clicking on the brand it's parent element now that brand is selected if we go on over to element settings we can set a link right there we'll choose a different page and in the drop-down we'll select home what if our logo doesn't have padding on it what if when we drop it in it looks like this that's okay there are lots of ways to get this right we can quickly adjust the top margin on our logo to push it off the top and center it that's configuring the brand or logo area in our navbar next is the links themselves we have these nav link placeholders here to save time and you can edit or delete these or you can add more and there are two ways to add additional nav links one with any element in our navbar selected under the element settings panel we can press add link another way to do this and this is a great time-saver if we're planning on styling our nav links is to copy and paste and right here we'll delete all that one and create a class we can name a class since we're intending to reuse the class on multiple nav links that way when we copy and paste this nav link the class is already applied to each one each nav link we pasted in for mayor we can double click to edit the text inside and by default the width of these nav links is being determined by the text we're typing inside plus any padding that's being applied to our nav link class we can also control the link settings where each link is going to take us on a per element basis so we can select any nav link and under our element settings panel we can control those link settings now you don't have to do this if you're just starting in a project you can always come back later once you've fleshed out your project structure and that leads us to the final and perhaps most time-saving aspect of a multi-page project and that's reusing our navbar now if you have a landing page for instance maybe a one-page site this isn't necessary but for multi-page sites this is massive with our navbar selected which we can see here in the navigator we can head on over to our symbols panel and of course create a symbol we can call it sample navigation but you can name yours more creatively of course that means the nav bar and everything inside is now globally accessible in other words now that it's a symbol we can reuse it anywhere we're placing that symbol the sample navigation right under our existing sample navigation to edit the symbol let's double click on it and let's try changing the text and instantly as soon as we finalize that change the text changes on the other nav bar as well if we duplicate a button we see that change on the second navbar – if we mess with our brand abit that carries through as well now mirroring this makes an effective demonstration but in practicality this is best used for navigation on separate pages that way you can make a change on any one page that affects the others as well so we can add a navbar to our project we know it consists of three parts brand menu bar and when it's visible menu button we can drag a brand image or logo into our brand link block we can add and configure links and we can create a symbol from our navbar that lets us reuse it anywhere in our project

8 thoughts on “Responsive navigation bar – Web design tutorial”

  1. Lol, the jokes in these tutorials are so great. Actually, EVERYTHING about these tutorials are masterfully done. Thanks!

  2. why i cannot resize in webflow like you do in video and when i try to see 'brands' from navbar in live version, there is no picture showing up

Leave a Reply

Your email address will not be published. Required fields are marked *