Screen so on smaller screens we don't have the menu items displayed over here we have this menu icon and if I click on that we have the mobile menu items displayed.
Over here we can click on any of these uh links and we'll be taken to that section so all these sections are designed in a responsive way so that it will look good on smaller screens as.
Well so in this video we will start making this page responsive we will make this header section responsive in this video and we'll also add the animation for the mobile menu items so let's get.
Started right here we are in the source code so let's go to the HTML file and the first thing we will do is we'll create these.
And in this we will have first of all we need to have this close icon so let's create a division with the class of close icon and in this we will have the close icon so let's go to hero icons.com.
And let's search for close and let's copy this icon from here and let's paste it over here and uh then we need to have the menu items so I'll just copy these uh anchor tags from here.
And let's space them over here after this uh close icon right now let's go ahead and style this so let's go to the style CSS file so let's go ahead and create a comment and I'll just Ty mobile.
Menu items and uh let's select the class so we have mobile menu items SL tab. mobile menu items and let's set the position to fixed and uh let's set the display to flex align items to the.
Center and justify content to the center so that it is in the center vertically and hor L and let's set the Z index to 500 so that it is above all the other elements and now if we go back to our.
- How To Add Video Background To Elements In A Blogger Website BlogSpot
- Learn How To Create This Automated Purchase Order Application In Excel While I Build It From Scratch
- Excel 2016 Intermediate
Design here we can see that we have this - ID Card Make
Mobile menu items displayed over here let's also set the height to 100 VP height and the width to 100% and uh let's add a background color and let's.Set the color to 333 and uh now if you go back here we can see that we have all these menu items we need to display all of them one below the other so let's set the flex.
Direction to column and let's add a gap of 30 pixels between each of the elements right now let's go ahead and style the anchor tags inside this so we can see we have these.
Anchor tags for the menu items so let's have mobile menu items a and let's remove the underlines by typing text decoration to none and let's set the color of the text to.
White and let's say the font size to 18 pixels let's go ahead and set the color of this text inside the button to Black so here we can see we have this class of BTN so let's type.
Mobile menu items BTN and let's set the color of the text to Black and let's set the font size to 18 pixels or let's try 16.
Pixels and I think that looks all right right now let's TR the close icon so let's tap mobile menu items close icon and let's set the position to fixed.
And let's set it to the top of 10 pixels and right of 20 pixels of the screen and let's add a background color of rgba 255 255 255 and for the opacity let's set it to.
0.03 and uh let's also set a width for the Clos icon s s VG so let's St mobile menu items close icon SVG and let's set the WID to 30 pixels and the color to white and here let's add a padding of 8.
Pixels and uh let's set the rounded
Corners to 8 pixels and let's tap cursor pointer and this is how the close button looks now it is not exactly in the center so we can just type display of.Flex and now we can see that the button is exactly in in the center of the background now we don't want this to be displayed by default so here for the mobile menu items I just set the opacity.
To Zero by default and also move it to the right side so let's start transform translate X and let's set the value to 100% so it'll be on the right side of the screen by default when we want to.
Display it we will add a class called active to this so here for now I just add a class of active and let's add the styles for the active class so let's St mobile menu items..
Active and here let's set the opacity to one and uh let's set the transform translate X to Z all right so that's it with the styling of the mobile menu items right now if you go back to the.
Original design and if you scroll down we can see that we have this subtle animation for this nav bar when we scroll down so let's add that.
Animation so if you go to the Styles and if you go to the nav bar here we can see that we have already added this class called scrolled to this and when we have the class of scrolled we are just.
Setting the padding to 8 pixels for the top and bottom and by default it is set to 16 pixels and here let's add a smooth transition so I just stop transition and let's set the value to.
All 900 milliseconds is right now we need to add the scrolled class to this nav then we scroll down a little bit so let's do that in the JavaScript so here in the main.js file let's type animation.
For navbar and here first of all let's add an event listener for the window so I just have window do add event listener and let's listen for the scroll event and let's create an aror function over.
Here and here first of all let's reference the nav bar so we have this nav element over here so let's tap const nav equals document. query selector and let's tap nav over here now let's add an.
If condition and let's check whether we have scrolled for let's try 20 pixels so let's have window do scroll Y is greater than 20 pixels then we'll just go ahead and add.
The class so let's St nav do classlist do add scrolled and let's add an else and here let's tap nav do classlist do remove scrolled and let's save this works so let's go to our website and uh.
I'll just remove the active class from here and uh now we can see that we have this uh nav bar and if you scroll down we can see that we have the animation so it is working all.
Right all right now the next thing we need to do is we need to hide this menu items of the desktop version when we are on smaller screens so here we have this uh division with the class of menu items.
Items and in that we have these menu items so let's hide this on smaller screens so here let's go ahead and add a media query so let's type smartphone and here let's add a media query and let's.
Set the max width to 800 pixels so whenever the screen width is less than 800 pixels all the CSS inside this block will be added to our HTML so let's go and type nav menu items display of n.
And if we are on larger screens we need to display it so here we can see that it is being displayed on larger screens but on smaller screens we don't have it displayed right now on smaller screens.
We need to display a menu icon over here so let's go to the HTML file and here let's add the menu icon so let's go outside this menu items Division and let's create a division with the class.
Of menu icon and here we will add the SVG of the menu icon so here in hero icons let's search for menu and let's copy this icon and let's let's paste it over.
Here and uh let's style it so here let's type nav menu icon and let's set the width for the SVG so let's have width of 30 pixels and now we can see that the menu icon is being displayed over here.
And let's also tap display of flex to bring it to the center vertically and now we don't want to display it on larger screens so if we maximize this we can see that the space of the menu icon.
Is displayed over here now if we add this this uh width over here in the desktop version we will have the menu icon displayed over here as well so what we will do is uh I'll just.
Hide the menu icon on larger screen so I'll just have display of none and now we can see that the menu icon doesn't take any space and if we go to the smaller screens we'll just go.
Ahead and set the display back to block so here let's St nav menu icon display of block and now we have the menu icon displayed over here and not on larger screens right now let's go ahead and add.
The JavaScript to display the menu items when we click on this menu icon so I just set the cursor to pointer and uh now let's go ahead and go to the main.js file and here let's type mobile.
Menu and we need to reference some of these elements we need to reference the menu icon and then we need to reference the close icon and then to reference this uh mobile menu items so let's go.
Back and here let's Tap const menu icon equals document. query selector and we have a class called menu icon and then let's type const close icon equals document. query selector close icon and.
Then let's tap const mobile menu items equals document do query selector and uh let's tap mobile menu items so this this is the class of the division and let's go ahead and add an event listener to.
