Desktop version now in this video we will make it responsive so we'll create a mobile version for this nav bar so let's get started .
all right so here's the source code of our nav bar and let's go ahead and create a media query.
So here i'm in the css now we'll create two media queries so for the first one i'll just set a max width and let's set it to.
700 pixels so whenever the screen size is less than 700 pixels all the styles that we have over here inside this block will be added to our design so let me.
Just open the inspector so that we can see the screen width i'll just minimize this and now if we increase the width of this.
It just around 700 pixels and what we'll do is we'll just reduce the space between these menu items so let's type navbar ul a.
And if you scroll up we can see that for the navbar ula we have added a padding of 0 and 32 pixels so let's scroll down and we'll just reduce the padding a little bit so i'll just have padding and.
0 for top and bottom and 20 pixels for left and right and now we can see we have less space between these menu items and if i.
Increase the screen width now we can see we have more space so that's it with the first media query all right now let's add one more media query so let's add a media query for.
Less than 640 pixels so just decrease the width a little bit and here we'll just type at media and let's set a max width of 640 pixels so now when the screen width is less.
Than 640 pixels all the styles that we Wesdigital
Have over here inside this block will be added to our design so what we will do is we just hide these menu items and these icons when we are less than 640.Pixels so let's tap nav bar container ul for selecting these menu items and let's also type navbar container.
And if you go to the html we can see that we have a division with the class of social so let's also target this let's tap social.
And let's set the display to none and now we can see we don't have the menu items and also the icons displayed over here now the next thing we will do is we'll create a menu icon over here so.
That when you click on that we want the menu items to be displayed over here so for that let's go back to our html file and here after this social division.
Let's create a division with the class of menu icon and here we will add a font awesome icon so let's open font awesome and let's go to icons.
And let's search for menu and let's scroll down and we're going to use this icon called bars so let's click on this and let's click on this code to copy it.
And let's paste it over here inside the menu icon division and now we can see we have the menu icon displayed over here now while we are here in the html let's also add the menu.
Items for the mobile version so after this nav let's create a ul and we'll also give it a class of mobile menus.
And in that we will have the list items
So we'll just copy the same list items from here so i'll just copy all of this and let's scroll down and paste it over.Here inside this ul and let's create one more ally for the social media icons so i'll just type li and i'll just copy.
This social division from here and let's paste it over here inside this li right now let's go to our style.css file and the first thing we will do is we.
Will hide all of this by default so here before the media queries i'll just type navbar container menu icon and i'll just set the display to none.
And we'll also hide this mobile menus so for that we have a class of mobile menus so i'll just target that over here here let's type dot mobile menus right now let's style the menu icon and.
The mobile menus in the mobile version so let's scroll down and let's go to the 640 pixels media query and here let's type navbar container.
Menu icon and let's set the display to block and we'll set the font size to 24 pixels.
And we'll also set the cursor to pointer now when we are in the mobile version we want to display this navbar container at the top so we don't want to have any space over here so if we scroll up we.
Can see that for the network container we have set a margin top of 24 pixels so here i'll just type navbar container and let's set the margin top to zero and i'll also set the top.
Position to zero let's also set the height to 40 pixels right now let's style the menu items so for the menu items we have a class of.
Mobile menus so i'll just type mobile menus and let's set the display to flex and we'll set the flex direction to column.
And we'll also set align items to the center we'll also set the position to fixed and let's set the left position to zero and the right position to zero so that.
It is in the center and i will also add a top position of 24 pixels and let's add a background color so let's set the background color to a dark.
Gray color and let's also add some styles to this anchor tag so here we can see inside the mobile menus we have the anchor tags so let's target that i just type mobile.
Menus a and let's set the color of the text to white and let's set the font family to roboto.
And we'll also remove the underlines so i'll just type text decoration and set it to none and let's set the text transform to uppercase.
And we'll also set the font size to 14 pixels right now let's go back to the mobile menus and let's remove these bullets so let's type list style.
And set it to none and we'll also remove the padding that comes by default with the ul so i'll just start padding 0 and let's set the gap between the items.
To 24 pixels and let's set the height of the mobile menus to 200 pixels and we'll also set a padding of 32 pixels top and bottom and 0 for left and right right now let's add some basic.
Styles to these icons so the icons are inside the social division and inside that we have the anchor tags.
So let's type mobile menus social a and let's set the font size to 28 pixels.
And let's add a margin of zero for top and bottom and eight pixels for left and right now we don't want to display these menu items by default we just want to display.
Them when we click on this menu icon so by default we will set the height to zero and we will add a class called active to this mobile menus.
So i'll just type mobile menus dot active and when we have the active class we will set the height back to 200 pixels and we'll also remove this padding from.
Here and i'll just paste it over here in the active class and now you can see that the menu items are still displayed over here so here we can see these menu items are displayed.
Over here so we don't want to display anything when we have a height of zero so for that we have to set the overflow to hidden and now we can see that nothing is.
Displayed over here and let's go back to our index.html file and let's add a class of active to the mobile menus so let's tap active over here and now we can see that the.
Mobile menus are displayed over here and if we remove the active class we cannot see them anymore so now the last thing we need to do is add and remove the active class to the mobile.
Menus when we click on this menu icon so we will do that using javascript so if we scroll down we can see that we have already linked our javascript file over here now in the javascript file we need.