The menu items and we also have a hover effect for the menu items and then on the right we have social media icons so here you can add the link of your social media pages so this is.
How it will look on a desktop now let me show you how it will look on a mobile device so let's decrease the width of the screen and.
We can see it is completely responsive here we can see when we have a width of i think it's less than 700 pixels we can see there is less space between these menu items.
And if we decrease the width of the screen even more we can see that we have this menu icon over here and if i click on that we have the menu items displayed over.
Here and if i click on this once again it goes back so this is how it will look on a mobile device and this is how it will look on a desktop so let's get started.
The necessary files so let's click on new file and let's create an html file i'll just name it index.html and we also need to have a css file.
Let's name it style.css and we also need to have a javascript file so let's create a file called main.js all right let's start with the index.html file now in vs code you have.
The shortcut where you can just press exclamation and press tab and you'll have this basic html5 code and let's link our css file over here so i'll just type link and press tab and.
Here in the edger values type style.css and let's also link our script file over here so i'll just type script colon src and press tab and here in the src i'll.
Just type main.js right now let's start with the html of the navbar so we'll create a nav element and we'll give it a class of navbar container.
And in that the first thing we will have Wesdigital
Is the logo so let's create a division with the class of logo and we'll create an anchor tag for the logo so that when someone clicks on the.Logo they should be taken to the home page so here let's type lb dot right now let's open this in our browser and let's see how it looks so i have.
This extension called live server installed in vs code so once you install that you can just right click over here in the html and click on open with live server.
And here we can see we have the logo displayed over here all right let's continue with the design so now we have these menu items so for this we'll create an unordered list.
So after this logo let's create an unordered list and in that we will have list items and in the list items we will have anchor tags.
And the first menu item that we need to have is about us so let's type about us over here and let's copy this list item and we need to have.
Three more menu items so i'll just paste it three more times and the next one we need to have is services and then we have our work and contact.
All right that's it with the menu items and the last thing we need to do is add these social media icons so for that let's create a division with the class of.
Social and in that we will have anchor tags for the social media icons so let's create an anchor tag over here and here you can add the link of your social media page.
Now for the social media icons we're
Gonna use font awesome so let's get the cdn of font awesome so you can just google for font awesome cdn and you can find the link of this.Website called cdnjs.com so let's open that and let's copy the link from here so i'll just copy the link of all.min.css so i'll just click on copy link tag.
And let's go back to our vs code and let's go to the head tag and i'll just paste it over here right now let's go to the font awesome website to get the code of the icons so.
Here i am in font awesome.com so let's search for the icon let's search for instagram and here we can see the icon so let's click on instagram square.
And let's click on this code to copy it and let's go back to our html file and i'll just paste it over here inside the first anchor tag right now let's copy this anchor tag and.
Paste it down and for the next one we need to have the icon of twitter so i'll just replace instagram with twitter.
Let's go back to our website and here we can see we have all the items displayed over here right now let's style this using css so let's go back to our vs code and.
Here we can see we have already linked our css file so let's go to our style.css file and the first thing we will do is target the navbar container so here we can see.
We have this nav element with this class navbar container so here let's tap nav bar container and the first thing we will do is we will set the display to flex so that all.
These elements will be one next to the other right now we can see that the logo is at the top and then we have the menu items after that and then we have the icons below that.
So let's set the display to flex and now we can see we have all these elements one next to the other right now let's set the max width of this navbar container to 800 pixels so i'll just.
Type max with 800 pixels and let's set justify content to space between so that all the elements are.
Spaced correctly so here we can see we have the logo on the left then we have the menu items at the center and then we have the icons on the right let's also bring this to the.
Center so for that let's type margin and i'll just set the margin to zero for top and bottom and auto for left and.
Right now you can see it is in the center we'll also center align it vertically so for that let's type align items to the center.
Right now the next thing we will do is we'll set the font family to roboto so let's type font family roboto and sans serif and.
We'll also add a box shadow so let's type box shadow and we'll set the values to 0 4 pixels 30 pixels negative 3 pixels.
Rgba 0 0 0 and 0.3 let's also add some padding so let's set a padding of 0 for top and bottom and 32 pixels left and right.
I think we can set a margin top over here so here instead of 0 i'll just type 24 pixels right now let's set the position of the snapbar container to fixed so that even.
If we scroll down or up the navbar should be at the same position so here i'll just have position and i'll just set it to fixed and now here we can see when we set the.
Position to fixed the width of the element has changed so for that we have to set the left position to zero and the right position to zero.
And now we can see we have the correct width right now the next thing we will do is style this unordered list so we want all of them to be positioned one next to the other.
So even for that we will set a display of flex so here we can see inside the navbar container we have this unordered list so let's type navbar container.
Ul and let's set the display to flex and we'll also get rid of these bullets so for that let's type list style and set it to none.
Now let's see whether we have any padding or margin for this ul so let's add a background color and here we can see we have some padding on the left.
So let's tap padding 0 right now everything looks alright so let's remove this background color right now let's style this logo so for the logo we have a division with.
The class of logo so let's target that here let's type navbar logo and in that we have an anchor tag so.
Let's target this anchor tag so let's type a and let's set the font size of the logo to 28 pixels.
And let's see the phone to weight to 900 and i will also remove the underline so i'll just tap text decoration and set it to none.