‫Hey, there.
‫Welcome back.
‫Now in this lecture, you are going to discuss about this change.
‫So the first thing you need to remember is there are multiple depths when we are working with menu,
‫that navigation bar when we are working with Qatar.
‫So what happened behind the scenes when we are trying to decrease the size as soon as we reach a point
‫where we need to go with this type of format?
‫We usually hide this navigation and activate this one.
‫So let me give you a quick example here.
‫We have this, though, which is going to currently follow all the UAE dogs and this is perfectly fine.
‫This whole navigation bar is fine, but we also have another navigation bar, which only work when we
‫are at a specific site.
‫So let me call this navigation bar, maybe as decks drop menu.
‫And let me call this one as maybe mobile menu or tablet menu, whatever I want.
‫So let me call this house mobile menu.
‫And save this one.
‫Now what I can do is I can change this to display as none here.
‫So as soon as I reach this 768 pixel, I can just select this menu and display this as none.
‫Let me try to do that.
‫I'm going to go with Heather and then I just need to select this now.
‫Mitch has a class near as our next stop.
‫Menu.
‫And I can see that display none.
‫Remember ahead, I'm going with this plane on and not visibility here, and there are two different
‫things.
‫The spin on that was just remove it.
‫So if you see now, it's gone.
‫But as we go at the big screen, it's working fine, so we can do this change here.
‫You observe that we missed something.
‫Why this is happening because now we need to hide this one when we are on big screen.
‫So I temper I just need to hide the other one with all the other cases.
‫So by default, what I can do is I can hide this by default itself and I can show this on a specific
‫screen.
‫Size only saw her inside my assistant and CSIS.
‫I'm going to go with my navigation bar here.
‫Inside my head, I'm going to select this now for our mobile menu, and I said display as none.
‫So this is not going to work unless and until I change its display.
‫If I get back here, everything is fine.
‫But as I change my size, you can see this is gone.
‫OK, everything is fine, but now is the time to bring this mobile menu back so we can change that.
‫We can add header.
‫Selectively now.
‫I can select the mobile menu and I can change its display so I can go over display, maybe in line,
‫maybe flex, whatever I want.
‫For now, I'm going to go in and name.
‫And remember, you need to add some content here, so for now, I'm just adding a hamburger image,
‫which is insulting my media.
‫And then inside my icons and then my hamburger, I can save this one.
‫Also remember, we need to resize test because this is going to be big so I can directly select my image
‫either here or maybe had it.
‫So both will work because it will be applied in all the cases.
‫So what I'm going to do is I'm going to apply inside my stylus here, says Observe.
‫Just select my header now.
‫Start menu.
‫And then I need to select the image you part, and here let me, I view it as 25 pixels.
‫Height is 25 pixel, save the swan jumper.
‫OK, this is working great, but the only issue is this is not at this center, so it's gone now.
‫As soon as I decrease the size, this is here, but not at the center.
‫Now we cannot allow in self center.
‫Why?
‫Because remember, this is this containers flex and this is a child.
‫So this is not no display, none.
‫But this is a child as well as this is a child.
‫So we can change it properly.
‫We can see a line self-centred.
‫So this is my menu and had I can add a line, self centered, save this one.
‫Goodbye care walking.
‫Fine.
‫So that's how we can control things according to this size.
‫Now, remember one important point.
‫If you want to make this work, we can have different animation.
‫So maybe you hover over this.
‫There will be animation and lot of things, but it's recommended to do things with JavaScript because
‫then you can edit CFS as well as HD html on clicks.
‫And that is important when we are working with these type of changes.
‫I hope you got the idea what we did here.
‫Now we need to jump, but are for discussion and do for changes.
‫Thank you for following one important thing that is left right now is the height you see.
‫So we need to update this.
‫Oh, let me jump here, get into the responsive part, and we just need to update the height which we
‫are following here somewhere.
‫Heather?
‫Yep, this is it REM.
‫Currently, I need to change behavior height.
‫So one thing I can do is I head out hair itself.
‫Let me sequence them, so the section is going down.
‫And let me add another detox here.
‫I can change the header.
‫I'm going to override the height.
‫Now here I can go over the six and maybe save this one, get back here, looks fine.
‫Oh, this one?
‫Here now, I have to work with Lugosi's again, so that means I need to copy this one, I'm in and get
‫care.
‫Changed its height.
‫So basically, currently it's 40.
‫Let me try to go with 38, so save this one.
‫Get back here.
‫You can see this is working fine.
‫So that's all.
‫That's all for this section.
‫Don't worry, we are going to discuss something later that will help us to avoid these type of content.
‫So we will be discussing about Variable a bit later.
‫But first, let us fix all this part.
‫A quick disclaimer and real website, we don't use hamburger like this.
‫Here.
‫My main motive was to make you understandable to navigation, but the first one is about the next stop
‫and the second one is about the mobile, so that's how we are going to deal with two navigation bar.
‫Now the content can change here.
‫I just took an example of image that is related to hamburger menu in real life.
‫We use font awesome icon for hamburger, or maybe something else.
‫But this was just an example.
‫Later, we will discuss more about how to create a real hamburger menu.
‫This was just an example.
‫Remember that.
‫So that's all for this lecture.
‫We will understand about this later, how to avoid these things again and again so we can utilize variable
‫and change them one by one.
‫Thank you for following, and I see you guys and the next one.