started all right this is how our page looks.
Right now we don't have anything displayed on the screen so let's go to our source code and let's start with the markup of the nav bar so here in the body let's go ahead and create a nav.
Element now if we go back to our design here we can see that the content of the nav bar has a max width so if I zoom out the page we can see that it has this Max width so for that let's go ahead and.
Create a Division and I'll just give it a class name of container and we can use this same class for all these different sections because for all these sections we need to have the same Max width so.
Can also add an image tag over here if you want and here for the logo let's also add a class called logo so that we can style it in the CSS now the next thing we will do is we will add these.
Menu items so let's create a division for that and let's give it a class of menu items now in this menu items division we need to have about Services blog testimonials and we also need to.
Have this button so let's create an anchor tag and uh here for the SF I'll just type hash for now and let's go ahead and type about and I'll just duplicate this and here for the second.
One let's type services and then for the third one we need to have blog and then testimonials and for the last one we need to have a button so here for this last anchor tag let's also add a class.
And let's give it a class of BTN and here for the text let's go ahead and type contact and let's go back to our design and uh this is how it looks right now so.
Posts Related:
- Este Microsoft Excel ! Sistema de painéis de estatÃsticas financeiras Tutorial 1. Office
- How To Design A Countdown Timer for Your Blogger Website (Part I)
- Excel 2019 Beginner Tutorial
We have the logo and these menu items - ID Card Make
All right now let's go ahead and style this so let's go to Styler CSS file and let's scroll down and first of all let's target the container division so let's.Ty do container and for the container we need to have a Max width and let's set the max width to 1024 pixels and let's also bring it to the center so let's St margin zero.
Auto and now if we add the background color over here we can see that we have this Max width and we have it in the center right now let's go ahead and style the nav so.
If we go back to the HTML file here we can see that we have the nav and in that we have the container so if you go back to our design here we can see we have this box Shadow for the nav element so.
Let's go back and uh let's type nav and let's add a box Shadow and let's set the values to 0 4 pixels 40 pixels 8 pixels rgba 0 0 0 and 0.3 and if you go back here we can see.
That we have this box Shadow now we need to fix this to the top so if you scroll down here we can see that the nav bar is fixed to the top so for that let's go ahead and type position and let's set it.
To fixed and now if you go back here we can see that the width of the element has changed so for that we need to type left of zero and right of zero now it has the.
Correct width right now we need to display this on top of all the other elements so let's type Z index and uh let's set the value to 400 and let's also set the background color to white.
And let's also add a padding and let's set the padding to 16 pixels top and bottom and 30 pixels left and right now if you go back to our design and if you scroll up here we can see.
That we have a larger height for this
Nav bar and if you scroll down the height changes so for that let's go ahead and let's add a class for the nav so let's tap nav.Dot scrolled so when the page has scrolled we will set the padding to 8 pixels top and bottom and uh 30 pixels left and right so we will reduce the top and.
Bottom padding a little bit right now let's go ahead and bring this logo to the left side and these menu items to the right side so for that we need to set the display of the container to flex.
So let's go ahead and Target the container division which is inside the nav so let's tap nav container and let's set the display to to flex and align items to the center and justify content.
To space between and now we can see that the logo is on the left side and the menu items on the right side right now let's go ahead and style this.
Logo so let's type nav container a. logo and let's set the font size to 24 pixels right now let's go ahead and style all these anchor tags so let's type nav container a and first of all let's.
Remove the underlines so let's tap text decoration none and now let's go ahead and set the font weight to bold and let's set the color.
Of the text to Black and we'll set the font size to 14 pixels and let's also set the text transform to uppercase now when we hold over this we.
Need to have a a different color so let's go back and let's type nav container a colon hover and let's set the color of the text to Ed.
2243 and let's also add smooth transition so here let's tap transition of all to 300 milliseconds e and now we have the smooth transition right now we need to have.
Some gap between these menu items so they are inside this menu items division so let's target this I just type nav menu items and let's set the display to flex.
And let's add a gap of 36 pixels and let's tap align items to the center right now let's go ahead and style this button and for the button we have given it a class name of BTN so.
Let's go ahead and add some common styles for all the buttons so here let's type do BTN and let's set the padding to 12 pixels top and bottom and 24 pixels left and right and let's set the Border.
Radius to 24 pixels and let's set the background color to a variable that we created called yellow color so let's have VAR yellow color and by default anchor tags are set to display of inline.
So let's change it to display of inline block so that we are able to add some margin top and bottom and now if you go back here we can see that we have the styles for the button now when we horor.
With this button we need to change the background color a little bit so let's go back and we also created a variable for that it is called yellow hover color so here let's type BTN colum hover.
And let's Tye background and let's set it to VAR yellow hover color and let's go ahead and add a smooth transition so let's tap transition all 300 milliseconds is.
Now when we hold over this button we can see that the color of the text also changes that's because we have added the hover effect for all the anchor tags in the nav so let's go back and here for.
The button hover let's tap color and let's set it to Black and now let's go back and uh we still have the color changing for the text that's because if we go to the nav here we can see that we.
Have set nav container a colon hover so this is a more specific tag so that's why this is G even more importance so let's go back over here and here let's add a more specific selector so let's St.
Nav container BTN colon hover so now if you hover over this we can see that we don't have the red color so everything is working all right for this nav bar and with that we have completed.
Designing the nav bar for our desktop version all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the.
Like button And subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.
