This menu item it moves over here and it also has the icon of the menu item so this is how this menu item works now in this video i'll show you how to.
Add this to your blogger website so let's get started now before adding this to a blogger website let's add some content over here.
And we will have different sections so when we click on this second menu item the page should scroll to that section so let's do that first and then we'll add this to a blogger website right here.
Is the source code of our design and i will leave the link of the source code in the description now the first thing we will do is we'll create a division with a class of content.
And in that we will have some content so i'll just create an edge too and let's type some heading over here so i'll start menu one.
A couple more times right now what we will do is we will divide this content into multiple parts so we'll have three parts for three menu items over here.
So i'll just create a division with a class of content one and i'll just include all of this inside this content one division so i'll just cut this from here.
And paste it down here right now let's copy this content one from here and i just paste it two more times and let's change the class and the heading so i'll just change this to.
Content two and this to menu two and we'll change this to content three and this to menu three right now you can see we have these three divisions over.
Here now let's add some basic styling so let's go back and let's go to the style.css file and i'll just add some basic styles over here so let's type content and we will.
Have a max width Wesdigital
Of 800 pixels and we'll bring it to the center so i'll just have margin 0 for top and bottom and auto for left and right and we'll.Set the font family to roboto and we'll also set the line height to 2 and we'll also add a padding bottom of 100 pixels right now let's style these headings so let's type content h2.
And i'll just set the font size to 60 pixels and we'll set the margin bottom to zero and we'll set the font weight to 900 all right this is our page looks right.
Now now let's go back and let's go to the index.html file and now what we will do is we will add all these menu items inside anchor tags.
So let's type a and press tab and here in the edge of you can add the id of the division so if you scroll up we can see that we have a class so we have to change this to an id.
So i'll just change it to id over here and even over here i'll just change it to id and even here we will change this to id right now let's go back and here.
In the anchor tag we have to type hash and then the id of the division so i'll just have content one and let's cut this ending tag from here and let's add it outside.
This menu item now we have to do the same with all the other menu items so let's type anchor tag and here i'll just type content 2 and i'll just cut this from here and add.
It down here and let's do the same for the third menu item and we will type content 3 and cut this and add it over here.
Right now let's go back and we also have
To change the color of these icons so let's go back and let's go to style.css file and let's target the anchor tags over.Here so here i'll just type menu bar container menu bar a and i'll set the color to white right now let's click on this second.
Menu item and we can see that the second division is displayed over here and if i click on this third menu item we have the third division displayed over here.
And now let's also add smooth scrolling so let's go back and here i'll just type html and i'll just set the scroll behavior.
To smooth right now let's click on the second menu item and we can see that it scrolls to the second content and if you click on this third.
Menu item it scrolls to the third division so everything works all right now let's add this to our blogger website so here i'm in the dashboard of.
My blogger website and let's create a new post so let's click on new post and here i'll just type some title i'll just type menu bar and now.
Let's go back to our source code and let's copy this html from here so i'll just copy everything all the way from this division right here.
Till the end of the body over here and i'll just paste it over here and before that you have to make sure that you are in the html view right now i'll just paste it over here.
And now let's also add the css so here i'll just create a style tag and let's go back and here i'll just copy everything from this line of css and till the end.
And i'll just paste it over here and we also need to add the javascript so let's go back down here and i'll just create a script tag over here and let's go back to our source code and.
Let's go to the main.js file and i'll just copy all this javascript from here and let's paste it over here inside the script tag and now let's click on publish.
And confirm right now let's wave this post and here we can see that the menu bar is displayed over here but we have some problems in the styling the first.
Problem is that we don't have the icons being displayed over here and then the next issue is that it is not in the center so if you right click over here and go to inspect.
And if you select this menu our container here we can see we don't have any left value over here so we have to type left and set it to zero and now you can see it is in the center.
And for the icons we have to add the link of font awesome so let's do that let's go back to our post and here in the menu bar container let's add a left position of 0.
And let's save it and let's go back and let's go to the theme and let's click on this arrow and click on edit html.
And here in the head tag we need to add the link of font awesome so let's go back to our source code and let's go to the html file and let's copy this link of font awesome from here.
And let's paste it over here inside the head section and let's click on save right now let's go back to our post and let's refresh this page.
And now you can see everything looks alright we have the icons being displayed over here let's click on the second menu item and here we can see we are taken to the.
Second section and let's click on the third menu item and we are taken to the third section so everything is working all right so that's basically how you create an.
Animated menu bar for your blogger website now you can go ahead and change this content to whatever you want and you can also change these icons you can just search for the icons in font.
Awesome and just change the icons over here you can also add more menu items over here and if you want to learn how to design all of this from scratch using html css and javascript i already.
Created a video on that you can check it out in the description of this video and i will also leave the link of the source code in the description but that's it for this video if you have any doubts.
You can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.