How to make a Responsive Navigation Bar using HTML & Tailwind CSS

hello everyone welcome to my channel my name is satisha and today in this video we are going to build this navigation bar using HTML Tailwind CSS and JavaScript bar items put in a row but when we go on a small screen say mobile then instead of having those items in a row we instead have a toggle button which when clicked pops up the navbar items so this is what we are going to build today so let's jump right onto the coding area so I've already set up this project and I've also installed Tailwind CSS in it if you have been following me on the past few videos on my channel then you would be well versed with a table and CSS installation process but if you are still unclear or you are not aware of it I have made a separate video on that you can find its Link in the description box down below else you can also download the starter code of this project from my GitHub as well again the link of it is given in the description so let's start working on the project so first we are going to build the mobile view as we are going to follow the mobile first approach so the first thing that we are going to do here is to add a background image to our whole web page so I'm going to give it a class of BG and give it an arbitrary value so I have to add the URL of it so I've kept the background image in my images folder within public and with the name image1.jpg and this is how it looks like so here I'm going to give the path of it images and the name is img1.jpg and say let's see okay we have the image but you can see it's not appearing properly so we need to add some extra properties as well so I'm going to give it a background of cover and keep it in the center also I want this webpage to be compatible with all the screen sizes so I'm going to also give it a height of screen and Save okay now it's work looking good the next thing that we are going to do here is to add the navbar items So within the body I am first going to create a header and within it I'm going to create a nav so the first item in my nav is a logo so I'm going to create an a tag and name it Tailwind anytime the next item in our nav is going to be a div which will contain an ordered list and also two buttons so the first one is going to be an unordered list the second is going to be a div which will contain two buttons if you remember previously we have a login and sign up button so in our unordered list we have multiple list items like home and I'm going to copy this same multiple times and the next is going to be Tailwind CSS tips then we have videos then we have blogs and we also have courses then in my other div we have two buttons one says login and the other one says sign up and Save also if you remember we also have an icon of bar on our nappar so for having that we are going to use a font awesome icon Library so I'm going to go here search for font Isom icon and the icon that I want is of bars so this is what we are going to use copy this and uh outside this div I'm going to Let's create another div and put it within it this won't work as we haven't added the CDN link of it so let's search for cdnjs or font awesome icon copy this from here and paste it over here now it should work fine let's go back to our web page and see okay now we have all the text and we also have the logo and the icon but uh we also want them to be in white color so in the body itself we can give it a text of white and say okay now the visibility is good also we want to add a background to our header so that it looks distinctive and we are able to see all the things kept in it very clearly so for having that I'm going to give it a class of BG and give it an arbitrary color I want it white but with an opacity of say 30 so I'm going to use this shortcut and Save okay now it has a background color added as well also we want our items to be placed in a row like this Tailwind anytime and also this icon rest we will take care of it later but for that purpose in our nav we are going to use the property of flex keep them in the center vertically and also keep it Justified between so that there is space in between those two items that we want the logo and also the icon okay ignore this middle section we are going to take care of it later but first we are going to work on this logo and also this icon so they are placed perfectly fine but uh there should also be some padding and also we want to have a certain height of our nav so what we are going to do here is we are going to give it a px of say 12 and a height of say 60 and say okay now you can see it has a certain height and also the items are placed properly now let's start working on the logo so for this logo we are going to have a class since it was bit bigger so I will say use a text of 2XL should be good because we want it big enough and the font can be bold let's see okay this is looking much better we also want a boundary outside it so I will give it a border property a border of say 2 and give it PX of 2 and py of 1 and 6. refresh okay now we have a border as well the next thing that we are going to work on is this icon that we have it's a bit small let's make it a bit bigger so for making this icon bigger we just have to add in this class name f a l g and say okay now it's fine now the next thing that we are going to work is on this drop down menu that we have so for having the drop down menu you can observe that we would want it just below this uh height that we have given so that it appears just below the header so for having that I will give it a class of absolute so that I can position it based on the top left right and bottom properties that I wanted to give I will give it a top property of say 64 pixels because I want it just below my header so we can see now all the items are listed just below the background that we have given I will also want to place it to the left most area so I will give it left of 0 and save okay we can see it is now appearing fine the next property that we are going to give it is to give a background property so that it does not look like that it's not a part of the navbar that we are creating so I will give it the same background color that I have given to my header so that it looks a part of it and save it okay it's look fine but it's not spanned over the whole screen so we want it to be spanned over the whole screen so I'll give it a width of full and say refresh yes now it's looking fine also we want these elements to be in the center so we are going to use flex property and I'm going to give it a flex call property I also want to give some gapping in between so I will give it gap of say around six and I also want it to be in the center horizontally so let's refresh it now you see now it's appearing fine also you can see that it's just touching the background this login and sign up button so let's also give it some padding so I will give it a py of 2. now it's fine also we want these items to have a certain text type and also it should have some font weight so instead of giving them individually to the items I am going to give it in the parent class so let's give it a text of LG and a font of say bold and say yes now it's looking much better now we will start uh giving some styling to our unordered list and also to the buttons that we have so for this unordered list I am going to give it a class of again Flex give it a flex column property since I want it to be horizontally in the center so I will give it item Center and also there should be Gap in between the elements so I'll give it gap of six and see yes now it's looking better also the same type of styling we want to give it to the next div that we have so let me copy this from here and paste the same for this one as well yes also we want to give a background to our sign up button so let's also do that so for this sign up button I'm going to give it a class of uh say background of Orange 400 should be good and also make its border radius to be LG and give it a padding of xs2 and padding of Y as one and see refresh this looks fine now we also want that when we hover on these items they should change their color to say orange so for having that in my list item I'm going to give it a class of hover so when we are hovering on it the text should be changed to Orange 400 and this we are going to add it to the rest of the list items as well okay let's also add this to our login button and Save okay now we can see when we are hovering on it they are changing their color so the last thing that is left is to make this toggle button functional so let's add some JavaScript to make this work now we need to capture the action when the icon the bar icon is clicked so when the icon is clicked it should send the message to this middle div that we have and this div should here to that event and list the items that are within it so for doing that we are first going to create a script tag and within it we are going to write the JavaScript so uh the first thing that we are going to do is to add two class names one to this icon that we have let's call it toggle button and also add a class to this middle div and let's call it drop down menu now we need to capture these classes that we have created so let's create two variables let's first call it toggle button and I will use it document dot query selector and this query selector is going to search for this class name or toggle button similarly we are going to create another variable which will capture the second class name that we have created so the second one let's call it drop down and it is going to search for this particular class name okay now what we want is whenever the person clicks on this toggle button it should have an event listener which is going to be click here and then we are going to create an arrow function in here which is going to send this message to this drop down menu that it needs to toggle the value so what value are we going to toggle here so for the toggle value initially we will keep this drop down menu out of the screen and when the person clicks on it it's going to give this particular Top Value to the drop down menu so initially what we want I can give it top of full and then when the person clicks on it it's going to change the value of 64 I have initially written it but I forgot we can also write it top of 16 uh according to 121 numbering system and Save now let's refresh and see if it's working fine so now when I'm clicking on it you can see the drop down menu is appearing so this is what we wanted to achieve and you can see with how little JavaScript we were able to create this drop down menu now let's start working on the large screen so now when we move to a large screen what we want is we want to have these navbar items listed in a row instead of having this toggle button suppose we will hide this icon that we have so on a large screen I will give it a display as none and you can see this is Now hidden also we want those items to appear on the screen so here what we are going to do is in the middle div we are going to give it a static property and save so you can see now the items are appearing but not properly and we also want to have the items in a row instead of giving them a flex column property so what we can do here on a large screen I can give it a flex row and also give it a justify between okay save okay now we can see the items are appearing now we will go inside the unordered list and also the div which has this login and sign up button and play with it also this uh background that we have additional background for the drop down menu we want to uh not have it in the large screen so we also wanted up to the large screen so I will write it Max LG so up to the large screen we'll have this background but after that we won't have it and see okay now we can see that has disappeared uh so let's play Within this unordered list so on a large screen I wanted Flex row and also on the large screen I will give it more Gap so let's give it a gap of around 8 and Save yes now it's looking better also we'll do the same for the next div that we have so I'll copy these two properties and paste it here okay now we have all the things also you can see this Tailwind anytime and also this navbar items are very kept very close so uh here I'm in the nav let's give it a gap of eight okay now this is fine also you can see this Tailwind anytime this anytime is going to the next line but we want it to be pairing on the same line itself so we will add in a new property in here to Tailwind anytime which is called White space no wrap which is not going to let this anytime go on the next line and Save yes now it's looking much better let's shorten the screen and see if it's looking good on all the screen sizes okay this is fine this is fine on this screen size it's looking a bit odd because this tips is going on the next line also this sign up is up is going on the next line so similar to what we have done to Tailwind anytime we are going to apply that white space Nora property for these two text as well so whenever you want the text to not go on the next line you can use this property so I'm going to use it here as well as for sign up and save okay this is better let's start in the screen okay this is looking good and also this toggle button is working so congratulations we have successfully built our responsive Tailwind CSS nav bar so that's all for this video I would highly recommend you to browse through other websites as well and try building their nav bars this is how you have become a provided so if you like this video don't forget to hit the like button and subscribe to this channel for more such content in future foreign [Music]

Channel: Etisha Garg

Views: 6,130

Keywords: navbar html css, navbar css, navigation bar in html and css, navigation bar, menu bar in html and css, navbar tailwind css, responsive navbar, responsive navbar html css javascript, responsive navbar html css, tailwind css navigation bar, tailwindcss responsive navbar, tailwind css tutorial, navbar using tailwind css, navbar tailwind, responsive navbar tailwind, tailwind css, tailwind navigation bar, tailwind navigation, navigation tailwind, tailwind css navbar responsive

Id: 6lnWjpZjPOM

Length: 16min 11sec (971 seconds)

Published: Mon Aug 28 2023