How to create a side nav with burguer menu — Beginner

The final result (Burguer menu is behind the side nav in this case)

For many years when I wanted to use something that involves CSS and Javascript like a menu in my apps I had to search for someone who had already published something on internet, but in the last few weeks I dedicated myself to improve my knowledge of CSS and start creating content like this to help people that are in the same position that I was. So let’s start.

Before this, you should know that you can find and download the code in the following repository:
https://github.com/Arquetipo28/side-burguer-menu

The structure of this project will be:

.../index.html
.../assets/main.css
.../assets/main.js

First we need to create our HTML document with all the needed containers:

You will notice that we have two principal containers, left (the side nav that will be hide on screens with width < 1000) and a pricinpal container that will take the full width of the screen on mobile devices.

With this in mind we are going to create the styles for this, considering that we want to show it fixed on large screens and hide on small ones we are also going to add the burguer button :D (which is not really a button) So here is all the needed code.

Right now I hope this can be useful for someone, either way I will keep checking it for the next few days to make it easily for everybody.