1 00:00:00,390 --> 00:00:01,010 ‫Hey, there. 2 00:00:01,080 --> 00:00:01,800 ‫Welcome back. 3 00:00:02,160 --> 00:00:05,970 ‫Now in this lecture, you are going to discuss about this change. 4 00:00:07,270 --> 00:00:13,300 ‫So the first thing you need to remember is there are multiple depths when we are working with menu, 5 00:00:13,300 --> 00:00:16,120 ‫that navigation bar when we are working with Qatar. 6 00:00:16,540 --> 00:00:22,420 ‫So what happened behind the scenes when we are trying to decrease the size as soon as we reach a point 7 00:00:22,420 --> 00:00:25,360 ‫where we need to go with this type of format? 8 00:00:25,690 --> 00:00:30,280 ‫We usually hide this navigation and activate this one. 9 00:00:30,700 --> 00:00:33,130 ‫So let me give you a quick example here. 10 00:00:33,130 --> 00:00:41,740 ‫We have this, though, which is going to currently follow all the UAE dogs and this is perfectly fine. 11 00:00:42,670 --> 00:00:49,360 ‫This whole navigation bar is fine, but we also have another navigation bar, which only work when we 12 00:00:49,360 --> 00:00:50,860 ‫are at a specific site. 13 00:00:51,250 --> 00:00:54,850 ‫So let me call this navigation bar, maybe as decks drop menu. 14 00:00:58,680 --> 00:01:04,320 ‫And let me call this one as maybe mobile menu or tablet menu, whatever I want. 15 00:01:04,480 --> 00:01:06,360 ‫So let me call this house mobile menu. 16 00:01:07,480 --> 00:01:08,530 ‫And save this one. 17 00:01:08,920 --> 00:01:12,970 ‫Now what I can do is I can change this to display as none here. 18 00:01:13,000 --> 00:01:21,250 ‫So as soon as I reach this 768 pixel, I can just select this menu and display this as none. 19 00:01:22,540 --> 00:01:23,840 ‫Let me try to do that. 20 00:01:23,860 --> 00:01:28,060 ‫I'm going to go with Heather and then I just need to select this now. 21 00:01:28,120 --> 00:01:31,150 ‫Mitch has a class near as our next stop. 22 00:01:32,940 --> 00:01:33,420 ‫Menu. 23 00:01:34,410 --> 00:01:37,200 ‫And I can see that display none. 24 00:01:38,470 --> 00:01:43,630 ‫Remember ahead, I'm going with this plane on and not visibility here, and there are two different 25 00:01:43,630 --> 00:01:43,990 ‫things. 26 00:01:44,440 --> 00:01:46,900 ‫The spin on that was just remove it. 27 00:01:47,140 --> 00:01:48,640 ‫So if you see now, it's gone. 28 00:01:50,950 --> 00:01:57,130 ‫But as we go at the big screen, it's working fine, so we can do this change here. 29 00:01:57,220 --> 00:01:59,500 ‫You observe that we missed something. 30 00:02:00,220 --> 00:02:06,940 ‫Why this is happening because now we need to hide this one when we are on big screen. 31 00:02:08,670 --> 00:02:13,240 ‫So I temper I just need to hide the other one with all the other cases. 32 00:02:13,260 --> 00:02:19,980 ‫So by default, what I can do is I can hide this by default itself and I can show this on a specific 33 00:02:19,980 --> 00:02:20,370 ‫screen. 34 00:02:20,370 --> 00:02:24,940 ‫Size only saw her inside my assistant and CSIS. 35 00:02:25,380 --> 00:02:28,290 ‫I'm going to go with my navigation bar here. 36 00:02:29,320 --> 00:02:35,860 ‫Inside my head, I'm going to select this now for our mobile menu, and I said display as none. 37 00:02:36,790 --> 00:02:40,570 ‫So this is not going to work unless and until I change its display. 38 00:02:40,770 --> 00:02:43,300 ‫If I get back here, everything is fine. 39 00:02:44,200 --> 00:02:47,680 ‫But as I change my size, you can see this is gone. 40 00:02:48,030 --> 00:02:55,720 ‫OK, everything is fine, but now is the time to bring this mobile menu back so we can change that. 41 00:02:55,730 --> 00:02:57,310 ‫We can add header. 42 00:02:59,980 --> 00:03:00,970 ‫Selectively now. 43 00:03:01,420 --> 00:03:07,810 ‫I can select the mobile menu and I can change its display so I can go over display, maybe in line, 44 00:03:07,810 --> 00:03:10,460 ‫maybe flex, whatever I want. 45 00:03:10,460 --> 00:03:12,820 ‫For now, I'm going to go in and name. 46 00:03:14,760 --> 00:03:20,580 ‫And remember, you need to add some content here, so for now, I'm just adding a hamburger image, 47 00:03:21,000 --> 00:03:22,710 ‫which is insulting my media. 48 00:03:23,310 --> 00:03:28,290 ‫And then inside my icons and then my hamburger, I can save this one. 49 00:03:28,770 --> 00:03:35,550 ‫Also remember, we need to resize test because this is going to be big so I can directly select my image 50 00:03:35,550 --> 00:03:37,200 ‫either here or maybe had it. 51 00:03:37,200 --> 00:03:40,740 ‫So both will work because it will be applied in all the cases. 52 00:03:41,160 --> 00:03:45,600 ‫So what I'm going to do is I'm going to apply inside my stylus here, says Observe. 53 00:03:46,410 --> 00:03:48,570 ‫Just select my header now. 54 00:03:48,590 --> 00:03:49,590 ‫Start menu. 55 00:03:52,570 --> 00:03:58,900 ‫And then I need to select the image you part, and here let me, I view it as 25 pixels. 56 00:04:01,220 --> 00:04:05,540 ‫Height is 25 pixel, save the swan jumper. 57 00:04:06,710 --> 00:04:12,870 ‫OK, this is working great, but the only issue is this is not at this center, so it's gone now. 58 00:04:13,280 --> 00:04:17,660 ‫As soon as I decrease the size, this is here, but not at the center. 59 00:04:18,330 --> 00:04:21,830 ‫Now we cannot allow in self center. 60 00:04:21,860 --> 00:04:22,370 ‫Why? 61 00:04:23,060 --> 00:04:28,400 ‫Because remember, this is this containers flex and this is a child. 62 00:04:28,760 --> 00:04:31,760 ‫So this is not no display, none. 63 00:04:32,060 --> 00:04:35,510 ‫But this is a child as well as this is a child. 64 00:04:35,870 --> 00:04:37,520 ‫So we can change it properly. 65 00:04:37,520 --> 00:04:40,040 ‫We can see a line self-centred. 66 00:04:40,400 --> 00:04:48,570 ‫So this is my menu and had I can add a line, self centered, save this one. 67 00:04:48,590 --> 00:04:50,480 ‫Goodbye care walking. 68 00:04:50,480 --> 00:04:50,900 ‫Fine. 69 00:04:51,410 --> 00:04:54,740 ‫So that's how we can control things according to this size. 70 00:04:55,280 --> 00:04:57,530 ‫Now, remember one important point. 71 00:04:58,490 --> 00:05:03,170 ‫If you want to make this work, we can have different animation. 72 00:05:03,440 --> 00:05:05,150 ‫So maybe you hover over this. 73 00:05:05,160 --> 00:05:10,820 ‫There will be animation and lot of things, but it's recommended to do things with JavaScript because 74 00:05:10,850 --> 00:05:15,740 ‫then you can edit CFS as well as HD html on clicks. 75 00:05:15,830 --> 00:05:20,000 ‫And that is important when we are working with these type of changes. 76 00:05:20,840 --> 00:05:22,970 ‫I hope you got the idea what we did here. 77 00:05:23,090 --> 00:05:28,040 ‫Now we need to jump, but are for discussion and do for changes. 78 00:05:29,220 --> 00:05:34,680 ‫Thank you for following one important thing that is left right now is the height you see. 79 00:05:35,310 --> 00:05:36,870 ‫So we need to update this. 80 00:05:37,140 --> 00:05:43,560 ‫Oh, let me jump here, get into the responsive part, and we just need to update the height which we 81 00:05:43,560 --> 00:05:47,010 ‫are following here somewhere. 82 00:05:47,710 --> 00:05:48,150 ‫Heather? 83 00:05:48,750 --> 00:05:51,230 ‫Yep, this is it REM. 84 00:05:51,270 --> 00:05:54,300 ‫Currently, I need to change behavior height. 85 00:05:56,130 --> 00:05:59,970 ‫So one thing I can do is I head out hair itself. 86 00:06:00,330 --> 00:06:03,210 ‫Let me sequence them, so the section is going down. 87 00:06:03,840 --> 00:06:06,600 ‫And let me add another detox here. 88 00:06:06,620 --> 00:06:08,220 ‫I can change the header. 89 00:06:08,910 --> 00:06:10,740 ‫I'm going to override the height. 90 00:06:11,990 --> 00:06:18,410 ‫Now here I can go over the six and maybe save this one, get back here, looks fine. 91 00:06:19,250 --> 00:06:19,940 ‫Oh, this one? 92 00:06:23,410 --> 00:06:30,770 ‫Here now, I have to work with Lugosi's again, so that means I need to copy this one, I'm in and get 93 00:06:30,770 --> 00:06:31,190 ‫care. 94 00:06:32,520 --> 00:06:34,620 ‫Changed its height. 95 00:06:34,980 --> 00:06:36,900 ‫So basically, currently it's 40. 96 00:06:37,920 --> 00:06:41,300 ‫Let me try to go with 38, so save this one. 97 00:06:41,340 --> 00:06:42,150 ‫Get back here. 98 00:06:42,390 --> 00:06:44,010 ‫You can see this is working fine. 99 00:06:44,880 --> 00:06:45,540 ‫So that's all. 100 00:06:45,540 --> 00:06:47,160 ‫That's all for this section. 101 00:06:47,190 --> 00:06:53,250 ‫Don't worry, we are going to discuss something later that will help us to avoid these type of content. 102 00:06:53,700 --> 00:06:57,010 ‫So we will be discussing about Variable a bit later. 103 00:06:57,030 --> 00:06:59,640 ‫But first, let us fix all this part. 104 00:07:00,720 --> 00:07:05,610 ‫A quick disclaimer and real website, we don't use hamburger like this. 105 00:07:06,690 --> 00:07:07,150 ‫Here. 106 00:07:07,320 --> 00:07:12,900 ‫My main motive was to make you understandable to navigation, but the first one is about the next stop 107 00:07:12,900 --> 00:07:19,530 ‫and the second one is about the mobile, so that's how we are going to deal with two navigation bar. 108 00:07:19,740 --> 00:07:21,990 ‫Now the content can change here. 109 00:07:21,990 --> 00:07:27,550 ‫I just took an example of image that is related to hamburger menu in real life. 110 00:07:27,570 --> 00:07:32,100 ‫We use font awesome icon for hamburger, or maybe something else. 111 00:07:32,520 --> 00:07:34,590 ‫But this was just an example. 112 00:07:34,680 --> 00:07:39,150 ‫Later, we will discuss more about how to create a real hamburger menu. 113 00:07:39,510 --> 00:07:40,920 ‫This was just an example. 114 00:07:40,920 --> 00:07:41,700 ‫Remember that. 115 00:07:42,630 --> 00:07:44,160 ‫So that's all for this lecture. 116 00:07:44,250 --> 00:07:51,450 ‫We will understand about this later, how to avoid these things again and again so we can utilize variable 117 00:07:51,450 --> 00:07:53,220 ‫and change them one by one. 118 00:07:53,970 --> 00:07:56,730 ‫Thank you for following, and I see you guys and the next one.