Html css and javascript you can watch my previous videos i have shown you how to design all of this from scratch and we can see that we have also these hover effects over here for this menu.
Items and let me show you the mobile version so let me just decrease the width of the screen and here we can see this is how the.
Mobile version looks and we have this menu icon over here and if i click on that we have the menu items displayed over here and if i click on this menu icon.
Once more it goes back so this is completely responsive now i will leave the link of the source code of this project in the description of this video right so in this video we're.
Going to add this to our blogger website so let's get started right here i'm in the dashboard of my.
See this is the theme right now to add this navigation bar we need to edit the theme so let's click on this arrow and click on edit html and let's scroll down and find the css.
So here you can see these are all the css of the theme let's scroll down and go to the end all right this is the end of the css so i'll just make some space over here and.
We will add our custom css over here so the first thing we will do is we will just hide this default navigation bar so let's right click over here and click on inspect.
And let's see what are the elements and we need to hide them in the css so if we scroll up we can see that we have this header with the class of centered top container so let's click on this element.
And here we can see this is the selector of the element and here we can just add a line of code display and set it to none and now we can see that the navigation bar is not displayed over.
Here so let's copy this selector from Wesdigital
Here and let's go back to our theme code and i'll just paste it over here and.Here i'll just type display of none now let's go back to our website and now if you scroll down and if we scroll up we can see that we have one more header.
Displayed over here so let's right click over here and click on inspect and let's see what is the selector of this element so this is the element.
Let's click on the element and here we can see this is the selector of the element so if we just type display of none over here.
We can see that the header is hidden so let's copy this selector and let's go back to our theme code and i'll just add a comma over here.
And let's paste the selector over here all right now the next thing we will do is we will add the code of this nav bar to our blogger theme code i will add the code just after this css.
So let's go to the source code and i will leave the link of the source code in the description of this video so let's copy everything inside the body so let's copy from the start of the nav.
And let's scroll down and let's copy it till here till the end of the ul now here you can go ahead and customize this navbar to your needs so here we can see these are the icons so you can go ahead.
And add your own icons over here so this is for instagram and twitter you can go ahead and add the link of any icons over here these are basically font awesome icons so you can get the code of the.
Icon from font awesome.com and then here
We have the menu items so you can go ahead and change this text to whatever you want and just add the link of the page over here in place of this hash and.You can do the same for this menu items for the desktop version right once you've done all the customization you can just copy and paste this code to your blogger theme code so i'll just.
Copy this from here and let's go back to our blogger theme code so if we scroll down here we can see we have the start of the body tag if you cannot find this you can.
Just search for it over here so just press command f or control f and just search for less than body and you'll find this line of code so inside the body we will add the code.
So i'll just add it just after this line of code of skip navigation so i'll just make some space over here and i just pasted the html over here all right the html has been pasted now.
The next thing we will do is add the css so let's go back to our source code and let's go to the style.css file and i'll just copy all of this from here and let's go back and let's scroll up.
And let's go to the css so here just after this css i just pasted the css now the last thing we will do is add the javascript so let's scroll down and.
Let's go to the end of the theme code and here just before the body ends i'll just add a script tag so i'll just create a script tag over here.
And i'll just paste the css inside the script tag so let's go back to our source code and let's go to the main.js file and i'll just copy everything from here.
And paste it over here now the last thing we need to copy from here is the link of font awesome because we are using the font awesome icons in this uh.
Nav bar so let's go back to our source code and let's go to the html and if we scroll up we can see that we have the link of font awesome over here inside the head tag.
So i'll just copy this link from here and let's go back and let's go to the top and here inside the head tag i'll just paste the link of font awesome so i'll.
Just paste it over here right now let's click on save well now let's go back to our website and let's refresh this page and let's see how it looks.
Right here we can see our nav bar is being displayed over here but we have some problems in the css the first thing we need to fix is that this nav bar is behind all the other.
Elements so we need to add some z index and the next thing we need to fix is we need to add a background color over here for this nav bar so right now it doesn't have any color.
So if i click over here and go to inspect and let's scroll up and let's select this navbar container.
And let's add the styles over here and let's see whether it works so let's add a z index and let's set it to 200 and we'll also add a background color so let's set a background color of white.
And now we can see it looks alright we'll also increase the width a little bit so i'll just set the max width to some higher value so.
I think 944 pixels looks alright so let's make these changes we need to set a max width of 944 pixels and we also need to copy these two lines of code.
So let's go back to our theme code and let's go to the css and here we can see we have the css of the nav bar so here i'll just paste the two lines of code.
And i will also set the max width to 944 pixels now the next thing we need to do is we need to add some spacing above these elements over here.
Because we have this navbar over here so let's right click over here and click on inspect and let's select the body and for the body we will have.
A padding top and let's set it to 100 pixels and now we can see we have this spacing at the top but we also have the spacing for this now bar so let's inspect the nav.
Bar and for the nav bar we will set a top position of zero and now everything looks alright so let's go back and make these changes.
So here i'll just select the body and here we'll just type padding top of 100 pixels and for the navbar container i'll just set the top value to.
Zero and let's save it and let's see how it looks right now let's go back to our website and let's refresh this page.
And we can see that everything looks alright we don't have any problems let's open the mobile version and we can see that the mobile version also works all right let's click on this.
Menu icon and we need to add z index for these menu items as well so let's go back to our template code and let's go to the css.
And let's scroll down and let's go to the menu items so this is the selector for the mobile menus so here i'll just type z index and let's set it to 200.