Now if you go to a mobile version this is how it looks so what we're going to do is when we are on smaller screens we'll just hide these menu items so let's tap at media and let's add a Max.
Width of 700 pixels so whenever the screen width is less than 700 pixels all these CSS inside this block will be added to our design so let's go ahead and type nav menu items and let's set.
The display to none and we'll also hide this button that you see over here so let's time type nav and the button is inside the right Division and it has a class of.
BTN right now we need to add a menu icon over here so let's go back to our HTML file and here after this contact button let's add a division with the class of menu icon and here we will add the menu.
Here right now let's go to Styler CSS file and uh let's target the menu icon so let's T nav menu icon let's target the SVG inside that and let's set the width to 30 pixels now we can see we.
Have the menu icon being displayed let's also Target the menu icon Division and uh let's set the display to block p ing of 3 pixels and cursor to pointer right now.
When we click on this menu icon we need to display the menu items over here so let's create menu items for the mobile version so here let's create a division with the class of mobile menu and in.
That let's create a division with a class of mobile menu items and let's copy these menu items from here and let's paste it over here and let's also copy this button and.
Let's paste it over here right now let's style this now first of all we need to hide this in desktop version so here in the desktop version let's type mobile menu display of none and let's also hide.
Posts Related:
- VBA to List files and folder in Google Drive Office
- 50 Professional Youtube Thumbnail Templates Pack Download In PSD Files English Photoshop Tutorial
- Power BI Beginner Tutorial
The menu icon so let's type menu icon
Now when we click on this menu icon we will add a class called active to this mobile menu and when we have the active class we'll just display the the mobile.Menu over here so for now I'll just add the active class over here and let's style it so here let's type mobile menu. active let's set the display to block let's set the position to.
Fixed background of white let's set the top to 100 pixels right of 20 pixels and padding of 24 pixels right now let's style these mobile menu items so let's type mobile menu Mobile menu items and.
Let's set the display to flex Flex direction to column and let's add a gap of 16 pixels right now let's add and remove this active class when we click on this menu icon so let's go back to.
Our HTML file let's remove this active class from here and we need to access this mobile menu and the menu icon elements from here inside our JavaScript so here let's TP const menu icon.
Equals document. crit selector and let's Tap menu icon over here and let's also Target the mobile menu so let's tap const mobile menu equals document. query selector and let's typ mobile.
Menu and uh now let's add an event listener for this menu icon so let's Tap menu icon. add event listener let's listen for the click event and here let's tap mobile menu. classlist do.
Toggle active so if you have an active class for this mobile menu it will be removed and if it doesn't have it will be added so now let's click on this menu icon and we have the menu being.
Displayed let's click on it once again and it disappears so everything is working all right let's go to the desktop version and here also everything is working all right let's scroll down.
And for this section we need to bring
These elements one below the other so let's go to the styler CSS file and let's go to the media query and uh it is the about section so let's typ hash.About container and uh let's say the flex direction to column and now we can see it looks all right I think we can decrease the Gap a little bit so let's type gap of zero and I think that looks.
All right after we scroll down we have the brand section and it is looking all right let's scroll down and we have these sections over here so let's style these now they are inside the split.
Container division so if you go back to the HTML here we can see that we have this section with an idea of releases and it also has a class of split we have the same class over here for.
Performance as well so let's target that let's tap split container and let's say the flex direction to column and I think that looks all right now if you increase the width of the browser window we can.
See that the width of the image is not 100% so let's target the images so let's tap Split Image and let's set the width to 100% and we also need to set the width of the containers so here we have.
The image inside the left Division and here we have the image inside the right division so let's tap split left and split right and let's say the width 100% now we can see the image has the correct.
Width for the releases and the performance sections right now let's scroll down and we need to have these buttons one below the other so let's target the division and it has this.
Division of the class of BTN container so let's target that and just tab BTN container and let's set the flex direction to column and now we can see that the buttons are one below the other.
And then lastly we have the footer and uh let's type footer and we have this division with the class of address so let's type address over here and here let's tap Flex direction to column and.
Let's set a gap of 50 pixels and now we can see that everything is looking all right so with that we have completely made our website responsive right so that's basically it for this video If.
You haven't 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.
