This menu icon over here and if i click on that we have the menu items displayed over here and the menu icon changes into a close icon and if i click on it once.
Again it changes back to the menu icon and the menu items are gone so we had designed this in the previous video i will also leave the link of the source code in the description now in.
This video i'll show you how to add this menu icon and this many items to your blogger website so let's get started .
Alright this is the dashboard of my blogger website and let's open this blog right here so let's click on view blog and this is how it looks right now we can see that we have these posts over.
Here but on the right hand side over here we can see that we have this menu icon now if i click on this by default we have these menu items displayed over here now we don't want to display these.
Icon with this icon right here so the first thing we will do is we'll just locate this menu icon in the theme code so if you right click over here and.
Click on inspect here we can see we have the markup of our website displayed over here if we scroll up we can see that we have this division of the class of.
Hamburger section and container and above that we have the main header which contains the heading and also the search icon and what we are interested is in this.
Hamburger section so let's go ahead and find this class in our theme code so we'll just search for class equals and hamburger section so let's go back to the dashboard and let's.
Go to theme and by the way i'm using this theme called notable light which comes by defaulted blogger so here you can see this theme right.
Here Wesdigital
Right now let's click on this arrow and click on edit html right now let's search for this class over here called hamburger section so.Let's go back and let's press ctrl f or command f and let's type class equals hamburger section and let's.
Press enter and here we can see we have this division with the class of hamburger section and in this we have this line of code which displays this button right.
Here so what we're going to do is we'll just delete this or let me just comment this so i'll just press less than exclamation hyphen hyphen.
And let's close the comment over here let's press hyphen hyphen greater than right now let's add some text over here so that we know that we are in the.
Correct place so let's just type menu here and let's press save now let's go to our website and let's refresh this page.
And now here we can see instead of the menu icon we have the text displayed over here so now we can go ahead and add any code over here and it will be displayed over here.
Now before adding the html css and javascript to our theme let's make some changes in this menu icon over here so let's go to the source code and if you go to the style.css file here.
We can see we have the css of the menu items and if you take a look at the css of the menu container we can see that we are setting the position to absolute now in our blogger website we don't want to.
Have an absolute position we want to
Have the icon displayed over here in place of this menu here text so what we're going to do is we're going to just delete these three lines of code.And now if you go back to the browser here we can see that we have the menu displayed at the default position and we are not forcing any position on this right now let's click on this menu icon.
And we can see that the menu items are displayed over here but they are on the right side now we want to set the position of these menu items relative to this menu icon over here.
So what we're going to do is let's go back and let's go to the html and we're going to add everything inside a container so let's create a division with a class.
Of menu main container and let's just cut this end tag from here and let's paste it down here and now we can see the menu container which has this menu icon and also the.
Menu items container which has all these menu items over here both of them are inside this mini main container division now what we're going to do is we're going to.
Set a position of relative to this menu main container and we're going to set this menu items container position to absolute so that it will be positioned relative to this menu main container.
So let's go to our style.css file and here let's type menu main container and let's set the position to relative and let's see what is the width of this.
Division right here so let's type background red and now we can see that the width of this division is 100 of the screen so let's change the width.
Let's change it to 40 pixels and now we can see we have the correct width and now if you click on this icon we can see that the menu items are.
Displayed over here relative to this icon let's go back to our css and let's go to the menu items container and here let's set the position so right now we have.
Set the right position to 40 pixels let's change it to zero and we'll change the top position to 50 pixels right now let's go back and let's click.
On this icon and we have the menu items displayed in the correct place let's just add a margin left to this icon so that we can see it clearly so.
Let's go back and here let's remove this background color and let's type.
Margin left and let's just add 200 pixels and now if we click on this icon we have the menu items displayed over here so.
Everything works all right right now let's remove this margin left and now let's add this code to our blogger website let's go to our theme code and here instead of menu here let's.
Add the html so let's go back to our source code let's go to the html file and let's copy everything from here till here.
And let's paste it over here and here we can see we have all these menu icons and you can go ahead and change the link over here in the srf attribute you can just add the link of.
The about page over here in the same way you can go ahead and change the links of all these menu items and if you want to add a new menu item you can just copy and paste this down.
And change this text and this link and if you want to remove one of these you can just delete this list item from here right now let's add the css so let's.
Scroll up and here we can see this is all the css of the theme let's go to the end and here let's make some space.
And let's go back to our source code and let's go to the css file and let's copy all these css from here and let's paste it over here now the last thing we need to do is add.
The javascript so let's go back to our source code let's go to the main.js file and let's copy everything from here and let's scroll down and let's go to the end.
And here i'll just create a script tag and let's paste the javascript over here right now let's click on save and let's go back to our website and let's refresh this page.
And here we can see that the icon is displayed over here now we have to move this a little bit to the top to align it with this search text over here right now let's click on this icon.
And we have the menu items displayed over here but we have some problems in the css the first thing we need to do is we need to bring it to the top so we.
Need to set a z index and the next thing we need to do is uh we need to set all these alphabets one next to the other right now it is vertical.
So let's right click over here and click on inspect and let's see what is the problem let's click on this menu items container and let's see whether we have some default.
Styles added by the theme so let's scroll down and here we can see we have this property word break and it is said to break word.