Applied the contempo theme so if you go back to our blogger dashboard and if you go to theme we can see that we have selected the content polite theme which comes by default with blogger and here.
We have this menu button and if i click on that we have the sidebar displayed over here now in this video i'll show you how to disable this sidebar and i will also.
Show you how to add a basic sidebar over here and i have a lot of videos on creating sidebars for your website so you can watch any of those videos and add the sidebar over here so let's get.
Started now it is really simple to disable the sidebar if you just hide this menu button then the sidebar won't be able to.
Appear on the screen so what we will do is we'll just get the selector of this menu button and then we will just hide it using css so let's right click over here and click on.
Menu so this is the selector so let's select this and let's copy it from here and let's go to our theme code so let's go to the dashboard and here in theme you can go over here to this arrow and.
Click on edit html and let's scroll down and go to the css so this is all the css of the theme let's scroll all the way to the bottom and this is where the css ends so i'll.
Just make some space over here and here we just pasted the selector and here i'll just type display and set it to none all right now let's click on save.
Right now let's go back to our website and let's refresh this page and now we can see that the menu button is not being displayed over here and now we don't have the access to the sidebar.
So that's how you can disable the sidebar in the contempo theme in your blogger website now let me show you how to add your own sidebar over here so for that let's go back to our theme code.
And i'll just create a basic sidebar Wesdigital
I'll just create a division so i'll just go to the end of the theme code and just before the body ends we'll just create a division for.The menu button so we will create a new menu button so let's create a division and let's give it a class of custom hamburger menu and in this division i'll just add a.
Text menu and let's close the division over here now this is going to be the menu button now you can go ahead and replace this text with your own icon or whatever you.
Want over here you can also use font awesome icons over here i'll just stick to this text and now let's create the sidebar so just create a division and we'll just give it.
A class of custom sidebar and let's close the division over here now in this division you can go ahead and add your own code for the sidebar i just keep it simple and i'll just add a.
Close button over here so let's create a division and i will just give it a class of close btn or close button.
And for the close button i'll just add a text close and let's close the division over here and here also you can use an icon or you can also use font awesome.
Icons over here in place of this text now we need to style this using css but before that let's go ahead and save this theme right now let's go back to our website.
And let's refresh this page and if you scroll down we can see that we have the sidebar and also the hamburger menu now let's go ahead and style this using css so i'll just right.
Click over here and click on inspect
And let's add some basic css over here so what we need to do is we need to add this menu button over here at the top here we can see we have selected the.Custom hamburger menu and let's set the position to absolute and we'll set the top position to 0 and the left position to 0 and let's also add a z index of.
Some higher value so that it is about this image over here so let's set the value to 300 and now we can see here we have the menu button displayed over here.
Now what we need to do is position this menu button over here so for that what we will do is uh we will take a look at the max width of these elements over here so if you go.
Over here to page and if i go over here to page body and in that we have the centered division and in that we can see that we have this max width of 922 pixels already set by.
The theme so let's add the same width for this menu button so that it has the correct position so.
Let's select this menu button and we will set a max width of 922 pixels and let's add a background color and let's see what is the width.
Now here we can see we don't have a width of 92 pixels so here we'll also add a right position and we'll just set it to zero so now we can see we have this max width of 922.
Pixels now let's bring it to the center so here i'll just type margin and zero for top and bottom and auto for left and right.
And now we can see we have the correct width for this element now let's also set the box sizing to border box so that even if we add some padding we have the correct width so now let's add.
A padding of let's try 24 pixels and that looks alright now let's remove this background color and.
Now let's set the color of the text to white and we'll also add font weight to bold and i think that's it with the menu button so let's copy all of these css.
From here and let's go back to our theme code and let's go to the css so we had a class of custom hamburger menu and let's paste all the css over here and let's remove this background color.
Line from here right now let's add some basic styles to the custom sidebar so for the sidebar we had set a class of custom sidebar if right click over here.
And click on inspect here you can see we have this custom sidebar so let's style that we'll just add some basic styles over here.
So i'll just tap dot custom sidebar and we'll set the position to fixed and we'll set the left position to zero and the top position to zero and we'll also set a height of 100 viewport height.
And we'll set the width to 240 pixels and let's add a background color let's just try light blue and we'll also add a z index.
Let's set it to 400 and now let's save this right now let's go back to our website and let's refresh this page and here we can see our basic sidebar.
Displayed over here now what we're going to do is we're going to hide this sidebar by default and when we click on the menu button we want to display this sidebar so let's go back.
And here i'll just set the opacity to 0 and i'll also set the pointer events to none so that you cannot click on the elements of the custom sidebar when it.
Is hidden and let's also add a transition so that we have smooth animation and we'll set it to all 300 milliseconds ease.
Now what we will do is we will add a class called active to the custom sidebar when we want it to be displayed so let's type custom sidebar.
Dot active and here we'll set the opacity back to 1 and we'll set the pointer events back to auto and now let's save this.
And let's go back to our website and let's refresh this page and now we can see we have this menu button displayed over here now the last thing we need to do is when we click on.
This menu button we want to display the sidebar and when we click on the close button we want to hide the sidebar so for that we will use some javascript let's go back to our theme code.
And let's go to the end of our code and here i'll just create a script tag and here we will add the javascript so the first thing we will do is we will reference all of these elements.
So let's type const custom sidebar equals document dot query selector and here i'll just tab custom sidebar.
And then we will select this close button so let's tap const close button equals document dot query selector.
Close btn or we'll just type custom sidebar close button and then we need to reference this custom hamburger menu so let's type.