‫Hey, there.
‫Welcome back.
‫Shame on that side.
‫Our welcome to the last section of this whole project.
‫Now we are going to discuss tons of things that are not related to this cause, and the reason is we
‫need to implement this hamburger.
‫So we are going to discuss something related to JavaScript and view content here and there.
‫We will divide, thanks in part, so it will be easy for us to implement everything.
‫The first thing we need to do is we need to create a mobile menu.
‫So if you observe here, we need to have this type of menu.
‫And then in the second part, we need to implement a feature that by default, this menu will be hidden.
‫And this will only appear when we click here.
‫This will appear when we click here again.
‫This will disappear so that meet the display of this is block.
‫The display of this is now none.
‫Block none, block none.
‫So if I distribute everything in two parts, the first part is add a hamburger image or 3D or icon,
‫whatever we have.
‫The second part is create this menu, create this menu as it is.
‫The third part is make this whole header sticky and the fourth part is add some JavaScript to make that
‫display.
‫None Display blog has been on display.
‫So we can have a property to view this and a new this.
‫OK, that's it.
‫So we have a robot and we need to implement it.
‫Let's start with the first part where we are going to have our hamburger menu.
‫So now this whole now part is not visible.
‫Let me squeeze it, and we need to start with a complete new part.
‫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
‫that is &mdash.
‫Menu.
‫This is going to be my mobile menu.
‫This will be my mobile menu, and by default, I'm going to say this is going to be none in terms of
‫display.
‫So if I jump over the top, this is deep menu and after this I'm going to have my morvai and menu and
‫this display is going to be none.
‫By default, it's none, but this will be visible here on me.
‫So let me say now I've got a menu and now I can say display as clock.
‫That's how this is going to work for the whole section.
‫This is this navigation will be not available, but as soon as I got this, that is 992 Pixel.
‫We will have all the content that we are going to add with this date.
‫Oh, yeah, have.
‫Now, what are the content?
‫Well, basically, we need to add everything so fast, I'm going to add a button and this button is
‫going to be basically it's going to be have a hamburger icon.
‫So that's it's going to have a class.
‫And then just jump on the board, stop icons, jump two icons and how you can search about hamburger
‫or you can search about last.
‫And you can directly add them.
‫So what I'm going to do is just copy this one and get back here.
‫So instead of adding this iconic and desktop in this class and just started here and let me call this
‫witness, I'm.
‫And saved this one.
‫And if I get back here, you can see this is visible now.
‫Gone.
‫Visible, gone, visible looks good to me, but now we can control everything since we have provided
‫our new glass as hamburger.
‫Let me get into my responsiveness, Oregon attitude itself.
‫And menu and then hamburger class and had I need to add all types of property.
‫So the first one will be my font size.
‫Let's call it three RAM.
‫Then I also need to make the cursor as pointer.
‫The other thing I need to change is I need to remove the border for this button.
‫So let's say border as none.
‫And also, I need to add a background color of white so I can simply go treblab.
‫Looks good to me, and if I get back here.
‫Yeah, looks quite.
‫Nothing is going to happen right now, but this looks good.
‫Now, if you want to change the color, if you can, what you can do is you can have the color for since
‫you are treating this as a text.
‫You can have your team colors, so you can simply.
‫Have your team color and you will have something like Blue if you want, you can go with these type
‫of green.
‫Let's say this thing next.
‫Looks good now, the next part is I need to simply create my own dire navigation here, so that should
‫be a bit difficult, but let's start inside our navigation.
‫What I'm going to do is I'm going to create my U.N. and this is going to have everything similar like
‫we need had.
‫So we are going to have something similar.
‫I'm going to copy paste here and let me remove this animal and this whole animated thing.
‫Save this one.
‫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
‫and then I have a button which is for contact us exactly the same thing that we did previously.
‫But now my aim is to rub this in a box and show it like this.
‫OK, so let's jump here and provide a name name for this Holywell, because everything will be controlled
‫with the help of this, you will know what I can say is I can say now my mobile.
‫Or M?
‫But you can select any type of name.
‫That's it.
‫Now why that would be much easier to understand and compare this one.
‫And I'm going to add everything here so that it can match my new and then note right now, her everything
‫will be her.
‫Now, since this is going to float, that means I can go in position as absolute.
‫And if this is going to float, that means the bidding should be the leader.
‫So that means the parent and many.
‫OK, position, religion.
‫OK, that was good to me.
‫That's the first step.
‫Now I need to update all the font size and everything else because most of these are too small.
‫So I'll accept one size and let's go read 1.8m trim.
‫The other thing is, I'm going to say this place, flex, because I need all the item to be in a sequence
‫of column.
‫So what I'm going to do is I'm going to follow Flex Directions column.
‫And since this is absolute, I need to provide the position.
‫So first, let me provide a position and to right to mine, except this should be OK.
‫Let me also provide some background color so that we have a team, right?
‫So what I can do is I can select this team across.
‫But my father saved my background color.
‫Now I need to add some spacing, which is going to be three on the article, as well as horizontal.
‫And then also I need to provide border radius, and that's going to be seven pixels.
‫The last one is going to be my shadow.
‫If you remember the website, you can play with different type of small shadow.
‫And if I get back here now, you can see we've got some type of menu here.
‫Looks good to me.
‫Since we are doing every change, let me also do one quick change here inside my nine nine toolbox so
‫I can select my header.
‫And I can add the property like my head should be a position should be sticky.
‫And the other thing is, I need to provide the top so it can stick.
‫So this is going to be zero one important property is going to be set in next.
‫Why?
‫Otherwise, let me save here and let me show you why we need that index.
‫Otherwise you can observe the Z Index.
‫Here is one and this is, you know, by default.
‫So every other element, we try to fight with our header.
‫So we need to do something.
‫What I'm going to do is I'm going to provide a set index of maybe something which has the highest among
‫all, let's say, 100 for now, let's say on it.
‫And now if you observe this is on top of everyone else.
‫Let me also provide a background color.
‫Let's say background color as.
‫White saved this one and get back now.
‫Now you can see this is a walking point.
‫Now, in this type of situation, JavaScript works well, but I think everything is working fine for
‫us.
‫Now let's add some spacing increases basically obsolete.
‫So let's do that because if I get back here.
‫So this is the entire menu, but what I need to select, is this a light?
‫So what I'm going to do is I'm going to go with my navar.
‫And then select my ally and head I can I'm fighting for let me go with padding on where I need to act,
‫so I need to add on the top of each element.
‫Then on the left, I don't need on the bottom I need.
‫And then some batting and.
‫If I moved with one name for all.
‫Much better.
‫OK.
‫Looks good to me.
‫Let's hear one.
‫And also, if you see, I need to change my phone to eat, and if I go here, I can also go with my
‫phone.
‫Wait, five hundred.
‫Save this one.
‫Yep.
‫Good.
‫Let me increase the batting space on my horizontal way, so let's say one murmured to them.
‫Much better.
‫Yeah.
‫Looks great to me.
‫The only thing remaining is there's this space.
‫OK, so that is going to be without a button.
‫So what I can do is I can select this button here and let's go with.
‫And strong, and I consider Don Regan and Helen Mirren marching off.
‫And let's get to them.
‫Save this one.
‫Get back here.
‫Much better.
‫I also need to align next to senators related text, align center, save this one looks good to me.
‫Yup, yup.
‫I also need to change the font color, so if I can get back inside my ally, let me select my color.
‫And I'm going to select The Daily Caller, if you remember, we have this.
‫Go ahead.
‫Why does same?
‫I look good to me.
‫Now we only need to add our effect.
‫OK, you can do that.
‫What I need to do is I just need to go with a layover.
‫So let me select this whole selector.
‫And Heather, let me go with our and all after this fast changing my car winter.
‫The other change is going to be my color, because now we are going towards team color.
‫So let's say I'm going to copy this one.
‫Best you can and this is going to be Team Nash color.
‫This should be fine.
‫Yep.
‫But we also need to add this, this whole background color.
‫So that means towards our entire ally.
‫So what I'm going to do is I'm going to change the background color as well.
‫And let me add some background color.
‫Save this one.
‫Looks good.
‫Let me add some border areas also.
‫So here I'm going to go with border radius and let's say five percent.
‫Much better now, if you remember, I took batting on left and right.
‫The only reason was so we have some space here.
‫If you observe, if I did my horizontal pattern to zero and if I save this one.
‫Get back here now you can see we don't have any space.
‫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
‫hair.
‫OK, I hope you got the idea why we took batting.
‫Now this looks fine.
‫This part is done.
‫Now the other part, this menu is walking fine.
‫This looks good and we can have all our links.
‫Everything is going to work fine as well as this part is working fine.
‫The other part that we are going to play with is JavaScript pipe.
‫OK, so that means everything is done.
‫There is only one part which is optional for you right now.
‫But let's continue this in the next lecture that is out of discourse, but I'm just including so you
‫can have this monolithic in this whole project.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫In the next lecture, let us add the functionality to just do this.
‫OK, let's follow this part and the next one.