We have this animation and if I click on this menu button we have this animation for all these elements so in this video we're going to add this.
Full screen nav menu to our blogger website so let's get started [Applause] .
Right here I'm in the dashboard of my blogger website and the theme that we are using is called notable light which comes by default with blogger so here's the theme right here.
And this is our website looks right now so here we can see this is the theme applied and we're going to replace this menu button with this menu button right here so we'll.
Need to locate this menu button in our theme code so let's right click on this menu button and let's click on inspect now this is the menu icon but let's go to The Container division so let's.
Select this division right here so this has a class of hamburger section and container so what we need to do is we need to locate this division in our theme code so let's copy these classes.
And let's go to a blogger dashboard and let's go to theme and let's click on this button and click on edit HTML now here we need to locate this division so let's just search for it I'll just.
Press command f and just paste the classes over here hamburger section and container and let's press enter and here we can see we have the division.
Right here so this is the code that represents this icon right here so we can just delete it but I'll just comment it so that we can use it later so let's press less than exclamation.
Posts Related:
Hyphen hyphen and let's close the - Make Automate
Comment over here so here we have to type hyphen hyphen greater than right now this menu icon is commented and if I save this.And if I go back to our website and if I refresh this page and now the menu icon is not visible so let's go back to our theme code and here let's add the menu icon so here.
I'll just make some space and let's go back to our source code and I will leave the link of the source code in the description now we need to copy the HTML of the menu icon so let's.
Copy this division right here and let's paste it inside here right now let's click on Save right now let's go back to our website and let's refresh this page.
And now let's right click over here and click on inspect and if you scroll down here we can see we have this menu icon container so let's also add the CSS of.
This menu icon container so let's go back to our source code and let's go to the style.css file and here are the styles for the menu icon container so let's copy these styles.
From here and let's paste it inside the CSS of our theme so let's scroll up and this is the CSS of the theme let's go to the end and let's create a comment.
Let's type full screen menu and let's paste the CSS over here and now let's click on Save right now let's go back to our website and let's refresh this page.
And here we can see that our menu icon is displayed over here on the top right now if you go back to the CSS here we can see that we have set the position to fixed so now we'll just remove this.
Position fixed from here and we will add
This menu icon inside the division that contains this heading and the search text so let's right click and click on inspect and let's take a look at the.Container division so here we have this division with the class of centered top and in that we have this division of the class of centered top first line and in that we have this division of the class.
Of main header elements so in the main header elements we have these headings and also this search so right now our menu icon container is outside this division right here so we need to bring.
This menu icon container inside this division so we need to move it just above this ending div tag so let's go to the HTML.
And let's copy this menu icon container from here and we'll just paste it inside this division so I'll just make some space over here and I'll just paste it over.
Here right now let's save it right now let's go back to our website and let's refresh this page and if I click over here and click on.
Inspect let's select the division main header elements and in that we have this menu icon container right now we need to remove this position fixed from here in.
Fact we'll remove all these styles from here so let's go back and let's go to the CSS and we'll just remove all these tiles from here.
And let's click on Save and let's go back to our website and let's refresh this page and now we can see that the menu icon container is before this heading so let's right click.
And let's see what's the problem and if we take a look at the container division here we can see that the display is set to flex and if we take a look at the Blog name.
Here we can see that the order is set to 1. let's go to the next element which is search and for that the order is set to 3 so we need to set a higher order for this menu icon container so if I just.
Type order of four now we can see that the menu icon container is in the correct place now we'll just add some margin and some padding to make it look better so.
Let's set the padding left to 30 pixels and we'll also add a margin top of negative 8 pixels and I think that looks all right so let's copy all these styles from here and let's go back to our code.
And I'll just paste it over here inside the menu icon container right now let's click on Save and now if you go back to our website and if I refresh this page.
We can see that everything looks all right now let's add the menu items so all these elements over here so let's go to our source code and first.
Of all let's copy the CSS so let's copy everything from here till the end and we just paste it over here and that is copy and paste the HTML so.
Let's go to the end of our code and here just before the body ends we'll just add the HTML so let's go back to our source code and let's go to the HTML file and let's copy.
The HTML of the menu container from here and we'll also copy this script for the gsap and I'll just paste it over here.
Right now let's copy and paste the JavaScript so let's create a script tag over here and in here we'll paste the JavaScript so let's go back to our source code and.
Let's go to the main.js file and let's copy all this JavaScript from here and let's paste it over here now by the way you can go ahead and make.
Changes to these values to change the animation and if you go to the HTML file here we can see that all these links over here you can go ahead and change these to whatever you want.
You can add a new link by adding a new anchor tag and here in the ad serve you can just add the link of your page all right let's go back to our theme code and.
Let's click on Save and now let's go back to our website and let's refresh this page and now if you click on this menu icon we have our full screen menu displayed.
Over here and if I click on this close icon it is hidden so it is working all right now let's also check the hover effect so if I hover over this we can see that all the letters are one.
Below the other so let's see what's the problem let's right click over here and click on inspect and let's scroll down and let's see whether we have any Styles applied by.
The theme so here we can see we have the style applied which is word break and it is set to break word so we have to change this to normal.
And now we can see the text looks all right so we need to change the word break inside our menu container division so let's go back to our code and let's go to the CSS.
And let's go to styles for the menu container and here let's set the word break to normal and let's save it.
And let's refresh this page and now we can see that the horror effect works all right now there are some more things we can do to improve our design so first of all if.
