We're going to create this design in this video let's get started.
now for the responsive version we have this menu icon displayed over here and when we click on this menu icon we have these menus displayed and this is for.
The mobile version so first of all let's create the markup of this menu so let's go to the HTML file and here let's go inside the container Division and let's create a division with the class of.
Mobile menu or mobile menu items and in this we will copy and paste these same menus and let's paste it over here right.
At media and let's tap Max withd and let's set it to 800 pixels so whenever the width of the screen is less than 800 pixels all the CSS inside this block will be added to our design so here.
Let's add the selector of the menu items of the desktop version so here we can see we have this menu items division inside the nav so let's tap nav menu items and let's set the display to none.
And now we can see that the desktop menu items have disappeared and here we have this mobile menu items displayed so let's go ahead and style that so here let's type mobile menu.
Items and let's set the position to Absolute and uh let's set the display to flex and the flex direction to column and let's add a background color of.
White and let's set the Top Value to 70 pixels and let's set the right value to let's try 30 pixels right now let's add a gap of 16 pixels between the elements and let's set a heading of 16.
- How To Add Links To Images In Your Website Using HTML & CSS BlogSpot
- wpForo (WordPress Forum Plugin) - Customization Options
- Email Basic PowerPoint Icon making Tutorial PowerPoint Show
Pixels and let's tap align items to the - ID Card Make
Center all right so that's it with the design of our mobile menu items now let's go ahead and create this menu icon over here so let's go to Hero icons.com.So here I'm in hero icons.com and let's search for menu and let's copy this SVG from here and let's go to the HTML file and here after this menu items division.
Let's create a division with a class of menu icon and let's paste the SVG over here and let's go to the sty CSS file and uh let's go ahead and add some styles to that so here let's tap nav.
Menu icon and in this we have the SVG so let's tap SVG and let's set the width of the SVG to 30 pixels and uh let's also add some.
Padding to the menu icon so let's tap padding and let's set the padding to 8 pixels and let's also set the cursor to pointer and I think we can bring the padding.
Down a little bit so let's set the padding to four pixels and I think that looks all right now this icon is not exactly in the center so for that we need to type.
Display of flex and now it is exactly in the center now we don't want to display this uh mobile menu items and this menu icon in the desktop version so for that let's go ahead and create a comment I.
Just type hidden items and here let's type menu icon or nav menu icon and mobile menu items and let's set the display to none and here in the mobile version let's type nav menu icon and.
Let's set the display to block and let's target the mobile menu items and uh let's set the display to flex now for this text content we want this heading to be on the top and this paragraph to.
Be at the bottom so forther let's go
Ahead and uh take a look at the HTML so here we can see we have this uh hero section and in that we have the container and in the container we have.The left and the right divisions so if you take a look at the CSS here for the container we have set the display to flex now we need to set the flex direction to column when we are on.
Smaller screens so here let's type hero container and let's set the flex direction to column and let's add a gap of 16 pixels between the elements right now let's decrease the font size of this.
Heading on smaller screens so let's tap hero and we have an H1 and let's set the font size to 30 pixels now we don't want this mobile menu items to be displayed by default so here by default I just set.
The opacity to zero and pointer events to none and here let's add a class called active so when we have this active class we will set the opacity back to one and.
Point our events to Auto right now let's open the dtto version and let's see whether we have any problems and everything looks all right so now let's add the functionality of displaying the.
Mobile menu items when we click on this menu icon so for that we will go to the Javascript file and uh let's go ahead and Target this menu icon and also the mobile menu items so here we can see we.
Have this division with the class of mobile menu items and also this division with the class of menu icon so let's St on menu icon equals document. query.
Selector and let's tap nav menu icon and let's target the mobile menu items so let's St const mobile menu items equals document. query selector nav mobile menu items and now let's add an emit listener.
To this menu icon so let's Ty menu icon do add event listener and let's listen for the click event and and when we click on the menu icon we want to add and remove the active class to the.
Mobile menu items because we have added the Styles over here so let's type mobile menu items. class list. toggle and let's type active over here and now if you click on this menu.
Icon we have the menu items displayed and if I click on it once again it disappears so it is working all right so with that we have made our hero section responsive now in the next video we will.
Add the animation to our hero section 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.
