1 00:00:01,340 --> 00:00:01,970 ‫Hey, there. 2 00:00:02,120 --> 00:00:02,900 ‫Welcome back. 3 00:00:02,990 --> 00:00:03,980 ‫Shame on that side. 4 00:00:04,500 --> 00:00:07,640 ‫Our welcome to the last section of this whole project. 5 00:00:08,300 --> 00:00:14,840 ‫Now we are going to discuss tons of things that are not related to this cause, and the reason is we 6 00:00:14,840 --> 00:00:16,940 ‫need to implement this hamburger. 7 00:00:17,090 --> 00:00:22,130 ‫So we are going to discuss something related to JavaScript and view content here and there. 8 00:00:23,450 --> 00:00:28,820 ‫We will divide, thanks in part, so it will be easy for us to implement everything. 9 00:00:29,330 --> 00:00:33,360 ‫The first thing we need to do is we need to create a mobile menu. 10 00:00:33,590 --> 00:00:38,000 ‫So if you observe here, we need to have this type of menu. 11 00:00:39,010 --> 00:00:44,770 ‫And then in the second part, we need to implement a feature that by default, this menu will be hidden. 12 00:00:45,160 --> 00:00:47,800 ‫And this will only appear when we click here. 13 00:00:47,890 --> 00:00:50,190 ‫This will appear when we click here again. 14 00:00:50,200 --> 00:00:54,940 ‫This will disappear so that meet the display of this is block. 15 00:00:55,060 --> 00:00:57,160 ‫The display of this is now none. 16 00:00:57,670 --> 00:00:59,770 ‫Block none, block none. 17 00:01:00,430 --> 00:01:07,510 ‫So if I distribute everything in two parts, the first part is add a hamburger image or 3D or icon, 18 00:01:07,510 --> 00:01:08,410 ‫whatever we have. 19 00:01:08,860 --> 00:01:13,840 ‫The second part is create this menu, create this menu as it is. 20 00:01:14,500 --> 00:01:22,540 ‫The third part is make this whole header sticky and the fourth part is add some JavaScript to make that 21 00:01:22,540 --> 00:01:23,050 ‫display. 22 00:01:23,050 --> 00:01:27,060 ‫None Display blog has been on display. 23 00:01:27,490 --> 00:01:30,940 ‫So we can have a property to view this and a new this. 24 00:01:31,670 --> 00:01:32,400 ‫OK, that's it. 25 00:01:32,410 --> 00:01:34,660 ‫So we have a robot and we need to implement it. 26 00:01:35,170 --> 00:01:40,060 ‫Let's start with the first part where we are going to have our hamburger menu. 27 00:01:40,690 --> 00:01:43,840 ‫So now this whole now part is not visible. 28 00:01:44,470 --> 00:01:48,820 ‫Let me squeeze it, and we need to start with a complete new part. 29 00:01:49,210 --> 00:01:55,210 ‫So what I'm going to do is I'm going to create an alibi here, and I'm going to call this as a menu 30 00:01:55,780 --> 00:01:56,980 ‫that is &mdash. 31 00:01:57,190 --> 00:01:57,730 ‫Menu. 32 00:01:58,060 --> 00:02:00,250 ‫This is going to be my mobile menu. 33 00:02:03,450 --> 00:02:09,450 ‫This will be my mobile menu, and by default, I'm going to say this is going to be none in terms of 34 00:02:09,450 --> 00:02:09,990 ‫display. 35 00:02:10,560 --> 00:02:18,840 ‫So if I jump over the top, this is deep menu and after this I'm going to have my morvai and menu and 36 00:02:19,170 --> 00:02:22,200 ‫this display is going to be none. 37 00:02:23,350 --> 00:02:27,050 ‫By default, it's none, but this will be visible here on me. 38 00:02:27,080 --> 00:02:34,240 ‫So let me say now I've got a menu and now I can say display as clock. 39 00:02:35,430 --> 00:02:38,250 ‫That's how this is going to work for the whole section. 40 00:02:38,280 --> 00:02:45,270 ‫This is this navigation will be not available, but as soon as I got this, that is 992 Pixel. 41 00:02:45,600 --> 00:02:49,200 ‫We will have all the content that we are going to add with this date. 42 00:02:50,350 --> 00:02:51,220 ‫Oh, yeah, have. 43 00:02:53,420 --> 00:02:54,650 ‫Now, what are the content? 44 00:02:54,890 --> 00:03:00,860 ‫Well, basically, we need to add everything so fast, I'm going to add a button and this button is 45 00:03:00,860 --> 00:03:05,620 ‫going to be basically it's going to be have a hamburger icon. 46 00:03:05,870 --> 00:03:07,880 ‫So that's it's going to have a class. 47 00:03:08,210 --> 00:03:15,260 ‫And then just jump on the board, stop icons, jump two icons and how you can search about hamburger 48 00:03:15,860 --> 00:03:17,630 ‫or you can search about last. 49 00:03:18,590 --> 00:03:20,600 ‫And you can directly add them. 50 00:03:21,110 --> 00:03:24,740 ‫So what I'm going to do is just copy this one and get back here. 51 00:03:24,920 --> 00:03:33,290 ‫So instead of adding this iconic and desktop in this class and just started here and let me call this 52 00:03:33,290 --> 00:03:34,770 ‫witness, I'm. 53 00:03:37,450 --> 00:03:38,350 ‫And saved this one. 54 00:03:38,890 --> 00:03:42,300 ‫And if I get back here, you can see this is visible now. 55 00:03:43,760 --> 00:03:44,230 ‫Gone. 56 00:03:44,470 --> 00:03:50,810 ‫Visible, gone, visible looks good to me, but now we can control everything since we have provided 57 00:03:50,810 --> 00:03:52,580 ‫our new glass as hamburger. 58 00:03:53,390 --> 00:03:56,780 ‫Let me get into my responsiveness, Oregon attitude itself. 59 00:04:00,910 --> 00:04:06,220 ‫And menu and then hamburger class and had I need to add all types of property. 60 00:04:07,420 --> 00:04:09,520 ‫So the first one will be my font size. 61 00:04:09,610 --> 00:04:11,980 ‫Let's call it three RAM. 62 00:04:12,400 --> 00:04:15,400 ‫Then I also need to make the cursor as pointer. 63 00:04:16,390 --> 00:04:20,320 ‫The other thing I need to change is I need to remove the border for this button. 64 00:04:20,470 --> 00:04:22,480 ‫So let's say border as none. 65 00:04:22,960 --> 00:04:28,270 ‫And also, I need to add a background color of white so I can simply go treblab. 66 00:04:29,900 --> 00:04:32,390 ‫Looks good to me, and if I get back here. 67 00:04:33,810 --> 00:04:34,830 ‫Yeah, looks quite. 68 00:04:35,940 --> 00:04:39,210 ‫Nothing is going to happen right now, but this looks good. 69 00:04:40,650 --> 00:04:46,380 ‫Now, if you want to change the color, if you can, what you can do is you can have the color for since 70 00:04:46,380 --> 00:04:47,850 ‫you are treating this as a text. 71 00:04:48,120 --> 00:04:50,940 ‫You can have your team colors, so you can simply. 72 00:04:52,760 --> 00:04:58,820 ‫Have your team color and you will have something like Blue if you want, you can go with these type 73 00:04:58,820 --> 00:04:59,390 ‫of green. 74 00:05:02,900 --> 00:05:04,430 ‫Let's say this thing next. 75 00:05:07,480 --> 00:05:15,070 ‫Looks good now, the next part is I need to simply create my own dire navigation here, so that should 76 00:05:15,070 --> 00:05:18,940 ‫be a bit difficult, but let's start inside our navigation. 77 00:05:18,950 --> 00:05:24,820 ‫What I'm going to do is I'm going to create my U.N. and this is going to have everything similar like 78 00:05:24,820 --> 00:05:25,450 ‫we need had. 79 00:05:26,110 --> 00:05:27,940 ‫So we are going to have something similar. 80 00:05:27,940 --> 00:05:36,430 ‫I'm going to copy paste here and let me remove this animal and this whole animated thing. 81 00:05:39,310 --> 00:05:40,150 ‫Save this one. 82 00:05:40,480 --> 00:05:49,300 ‫So what I just did is I created a world tag and then I have a dog for my home, then on my package testimonials 83 00:05:49,540 --> 00:05:55,480 ‫and then I have a button which is for contact us exactly the same thing that we did previously. 84 00:05:55,930 --> 00:06:00,550 ‫But now my aim is to rub this in a box and show it like this. 85 00:06:01,730 --> 00:06:09,290 ‫OK, so let's jump here and provide a name name for this Holywell, because everything will be controlled 86 00:06:09,290 --> 00:06:14,090 ‫with the help of this, you will know what I can say is I can say now my mobile. 87 00:06:15,720 --> 00:06:16,360 ‫Or M? 88 00:06:16,670 --> 00:06:19,140 ‫But you can select any type of name. 89 00:06:20,310 --> 00:06:20,790 ‫That's it. 90 00:06:21,520 --> 00:06:26,550 ‫Now why that would be much easier to understand and compare this one. 91 00:06:26,950 --> 00:06:35,730 ‫And I'm going to add everything here so that it can match my new and then note right now, her everything 92 00:06:36,060 --> 00:06:36,840 ‫will be her. 93 00:06:39,140 --> 00:06:44,660 ‫Now, since this is going to float, that means I can go in position as absolute. 94 00:06:46,530 --> 00:06:50,730 ‫And if this is going to float, that means the bidding should be the leader. 95 00:06:51,300 --> 00:06:55,110 ‫So that means the parent and many. 96 00:06:56,690 --> 00:06:58,920 ‫OK, position, religion. 97 00:06:59,280 --> 00:07:00,900 ‫OK, that was good to me. 98 00:07:01,890 --> 00:07:03,090 ‫That's the first step. 99 00:07:03,120 --> 00:07:10,230 ‫Now I need to update all the font size and everything else because most of these are too small. 100 00:07:10,710 --> 00:07:15,720 ‫So I'll accept one size and let's go read 1.8m trim. 101 00:07:16,980 --> 00:07:24,210 ‫The other thing is, I'm going to say this place, flex, because I need all the item to be in a sequence 102 00:07:24,210 --> 00:07:24,870 ‫of column. 103 00:07:25,100 --> 00:07:28,680 ‫So what I'm going to do is I'm going to follow Flex Directions column. 104 00:07:29,780 --> 00:07:33,410 ‫And since this is absolute, I need to provide the position. 105 00:07:33,680 --> 00:07:40,670 ‫So first, let me provide a position and to right to mine, except this should be OK. 106 00:07:41,210 --> 00:07:47,370 ‫Let me also provide some background color so that we have a team, right? 107 00:07:47,390 --> 00:07:50,500 ‫So what I can do is I can select this team across. 108 00:07:54,110 --> 00:07:57,340 ‫But my father saved my background color. 109 00:07:57,990 --> 00:08:03,980 ‫Now I need to add some spacing, which is going to be three on the article, as well as horizontal. 110 00:08:04,340 --> 00:08:09,710 ‫And then also I need to provide border radius, and that's going to be seven pixels. 111 00:08:10,370 --> 00:08:12,560 ‫The last one is going to be my shadow. 112 00:08:12,920 --> 00:08:16,790 ‫If you remember the website, you can play with different type of small shadow. 113 00:08:17,600 --> 00:08:23,780 ‫And if I get back here now, you can see we've got some type of menu here. 114 00:08:25,140 --> 00:08:26,460 ‫Looks good to me. 115 00:08:28,070 --> 00:08:34,100 ‫Since we are doing every change, let me also do one quick change here inside my nine nine toolbox so 116 00:08:34,400 --> 00:08:36,470 ‫I can select my header. 117 00:08:37,770 --> 00:08:43,320 ‫And I can add the property like my head should be a position should be sticky. 118 00:08:44,900 --> 00:08:49,910 ‫And the other thing is, I need to provide the top so it can stick. 119 00:08:50,030 --> 00:08:55,760 ‫So this is going to be zero one important property is going to be set in next. 120 00:08:55,910 --> 00:08:56,420 ‫Why? 121 00:08:57,350 --> 00:09:01,550 ‫Otherwise, let me save here and let me show you why we need that index. 122 00:09:01,550 --> 00:09:03,500 ‫Otherwise you can observe the Z Index. 123 00:09:03,500 --> 00:09:06,440 ‫Here is one and this is, you know, by default. 124 00:09:06,440 --> 00:09:10,210 ‫So every other element, we try to fight with our header. 125 00:09:10,850 --> 00:09:12,240 ‫So we need to do something. 126 00:09:12,260 --> 00:09:18,530 ‫What I'm going to do is I'm going to provide a set index of maybe something which has the highest among 127 00:09:18,530 --> 00:09:20,870 ‫all, let's say, 100 for now, let's say on it. 128 00:09:21,650 --> 00:09:25,580 ‫And now if you observe this is on top of everyone else. 129 00:09:28,170 --> 00:09:30,390 ‫Let me also provide a background color. 130 00:09:32,130 --> 00:09:33,770 ‫Let's say background color as. 131 00:09:37,030 --> 00:09:39,850 ‫White saved this one and get back now. 132 00:09:40,150 --> 00:09:42,160 ‫Now you can see this is a walking point. 133 00:09:45,500 --> 00:09:51,740 ‫Now, in this type of situation, JavaScript works well, but I think everything is working fine for 134 00:09:51,740 --> 00:09:51,890 ‫us. 135 00:09:52,050 --> 00:09:55,790 ‫Now let's add some spacing increases basically obsolete. 136 00:09:56,270 --> 00:09:58,940 ‫So let's do that because if I get back here. 137 00:10:00,220 --> 00:10:04,570 ‫So this is the entire menu, but what I need to select, is this a light? 138 00:10:05,740 --> 00:10:10,030 ‫So what I'm going to do is I'm going to go with my navar. 139 00:10:12,190 --> 00:10:20,100 ‫And then select my ally and head I can I'm fighting for let me go with padding on where I need to act, 140 00:10:20,110 --> 00:10:24,070 ‫so I need to add on the top of each element. 141 00:10:24,640 --> 00:10:28,330 ‫Then on the left, I don't need on the bottom I need. 142 00:10:28,600 --> 00:10:30,370 ‫And then some batting and. 143 00:10:31,850 --> 00:10:33,530 ‫If I moved with one name for all. 144 00:10:35,410 --> 00:10:36,190 ‫Much better. 145 00:10:36,310 --> 00:10:36,880 ‫OK. 146 00:10:36,970 --> 00:10:37,990 ‫Looks good to me. 147 00:10:38,530 --> 00:10:39,340 ‫Let's hear one. 148 00:10:40,300 --> 00:10:47,770 ‫And also, if you see, I need to change my phone to eat, and if I go here, I can also go with my 149 00:10:47,770 --> 00:10:48,260 ‫phone. 150 00:10:48,280 --> 00:10:49,810 ‫Wait, five hundred. 151 00:10:50,830 --> 00:10:51,760 ‫Save this one. 152 00:10:55,050 --> 00:10:55,410 ‫Yep. 153 00:10:56,040 --> 00:10:56,430 ‫Good. 154 00:10:56,640 --> 00:11:01,980 ‫Let me increase the batting space on my horizontal way, so let's say one murmured to them. 155 00:11:04,400 --> 00:11:05,390 ‫Much better. 156 00:11:05,420 --> 00:11:05,780 ‫Yeah. 157 00:11:05,900 --> 00:11:06,920 ‫Looks great to me. 158 00:11:07,760 --> 00:11:10,340 ‫The only thing remaining is there's this space. 159 00:11:11,240 --> 00:11:13,490 ‫OK, so that is going to be without a button. 160 00:11:13,520 --> 00:11:18,090 ‫So what I can do is I can select this button here and let's go with. 161 00:11:20,110 --> 00:11:26,880 ‫And strong, and I consider Don Regan and Helen Mirren marching off. 162 00:11:31,690 --> 00:11:32,950 ‫And let's get to them. 163 00:11:33,970 --> 00:11:34,900 ‫Save this one. 164 00:11:35,140 --> 00:11:35,860 ‫Get back here. 165 00:11:37,200 --> 00:11:38,280 ‫Much better. 166 00:11:38,400 --> 00:11:46,680 ‫I also need to align next to senators related text, align center, save this one looks good to me. 167 00:11:49,200 --> 00:11:49,950 ‫Yup, yup. 168 00:11:50,450 --> 00:11:58,020 ‫I also need to change the font color, so if I can get back inside my ally, let me select my color. 169 00:11:59,170 --> 00:12:04,030 ‫And I'm going to select The Daily Caller, if you remember, we have this. 170 00:12:06,700 --> 00:12:07,590 ‫Go ahead. 171 00:12:08,050 --> 00:12:10,840 ‫Why does same? 172 00:12:13,450 --> 00:12:14,920 ‫I look good to me. 173 00:12:15,130 --> 00:12:17,500 ‫Now we only need to add our effect. 174 00:12:17,800 --> 00:12:19,570 ‫OK, you can do that. 175 00:12:20,140 --> 00:12:23,530 ‫What I need to do is I just need to go with a layover. 176 00:12:25,480 --> 00:12:27,580 ‫So let me select this whole selector. 177 00:12:28,750 --> 00:12:35,440 ‫And Heather, let me go with our and all after this fast changing my car winter. 178 00:12:36,910 --> 00:12:42,100 ‫The other change is going to be my color, because now we are going towards team color. 179 00:12:42,460 --> 00:12:44,480 ‫So let's say I'm going to copy this one. 180 00:12:44,530 --> 00:12:49,450 ‫Best you can and this is going to be Team Nash color. 181 00:12:51,060 --> 00:12:52,020 ‫This should be fine. 182 00:12:53,200 --> 00:12:53,530 ‫Yep. 183 00:12:54,980 --> 00:12:58,010 ‫But we also need to add this, this whole background color. 184 00:12:58,140 --> 00:13:01,190 ‫So that means towards our entire ally. 185 00:13:01,610 --> 00:13:05,030 ‫So what I'm going to do is I'm going to change the background color as well. 186 00:13:05,620 --> 00:13:07,460 ‫And let me add some background color. 187 00:13:10,170 --> 00:13:11,100 ‫Save this one. 188 00:13:12,890 --> 00:13:13,650 ‫Looks good. 189 00:13:14,000 --> 00:13:16,070 ‫Let me add some border areas also. 190 00:13:16,610 --> 00:13:21,710 ‫So here I'm going to go with border radius and let's say five percent. 191 00:13:24,260 --> 00:13:29,180 ‫Much better now, if you remember, I took batting on left and right. 192 00:13:29,600 --> 00:13:32,870 ‫The only reason was so we have some space here. 193 00:13:34,100 --> 00:13:39,380 ‫If you observe, if I did my horizontal pattern to zero and if I save this one. 194 00:13:39,470 --> 00:13:43,130 ‫Get back here now you can see we don't have any space. 195 00:13:44,720 --> 00:13:50,750 ‫So what I'm going to do is I'm will take to them so I can maintain space on both side here as well as 196 00:13:50,750 --> 00:13:51,200 ‫hair. 197 00:13:51,680 --> 00:13:54,190 ‫OK, I hope you got the idea why we took batting. 198 00:13:54,890 --> 00:13:55,940 ‫Now this looks fine. 199 00:13:55,940 --> 00:13:56,960 ‫This part is done. 200 00:13:57,650 --> 00:14:00,830 ‫Now the other part, this menu is walking fine. 201 00:14:00,830 --> 00:14:03,950 ‫This looks good and we can have all our links. 202 00:14:03,950 --> 00:14:07,970 ‫Everything is going to work fine as well as this part is working fine. 203 00:14:09,440 --> 00:14:14,010 ‫The other part that we are going to play with is JavaScript pipe. 204 00:14:14,120 --> 00:14:16,400 ‫OK, so that means everything is done. 205 00:14:16,400 --> 00:14:19,520 ‫There is only one part which is optional for you right now. 206 00:14:19,880 --> 00:14:26,780 ‫But let's continue this in the next lecture that is out of discourse, but I'm just including so you 207 00:14:26,780 --> 00:14:29,690 ‫can have this monolithic in this whole project. 208 00:14:30,440 --> 00:14:32,280 ‫I hope this lecture was helpful. 209 00:14:32,300 --> 00:14:33,320 ‫Thank you for calling. 210 00:14:33,500 --> 00:14:38,090 ‫In the next lecture, let us add the functionality to just do this. 211 00:14:38,540 --> 00:14:41,540 ‫OK, let's follow this part and the next one.