Step 1:

Create an index.html file and add the tags for creating a nav bar.

<nav>
 <ul class="nav-links"> 
  <li><a href="">Home</a></li> 
  <li><a href="">Nosotros</a></li> 
  <li><a href="">Servicios</a></li> 
  <li><a href="">Documentos</a></li> 
  <li><a href="">Contacto</a></li> 
 </ul>
</nav>

The result:

Step 2:

Create a CSS file (style.css or whatever), link it on your Html file and add the following:

*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 nav{
   display: flex;
   justify-content: space-around;
   align-items: center;
   min-height: 8vh;
   background: rgb(241, 241, 241) ;
 }

 body {
   font-family: 'Poppins', sans-serif;
 }

The result:

Step 3:

We’re going to apply some styles to nav bar items as follows:

.nav-links{
   display: flex;
   justify-content: space-around;
   width: 45%;
 }

 .nav-links li{
   list-style: none;
 }

 .nav-links a{
   color: black;
   text-decoration: none;
   letter-spacing: 3px;
   font-weight: bold;
   font-size: 12px;
 }

The result:

Step 4:

We need to add a burger button for display and hide our bar on mobile devices.

On your html file after the ul tag write the following:
<div class="burguer">
  <div class="line1"></div> 
  <div class="line2"></div>  
  <div class="line3"></div>  
</div>

On your css file, apply the styles for the burger button:
 .burguer{
   display: none;
 }
 .burguer div{
   width: 25px;
   height: 3px;
   background-color: black;
   margin: 3px;
 }

The result:

Step 5:

Now, we need to add media queries to handle our nav bar depending on the device we’re watching the page. On our CSS file add the following:

@media screen and (max-width: 768px){
   body{
     overflow-x: hidden;
   }

   .nav-links{
     position: absolute;
     right: 0px;
     height: 92vh;
     top: 8vh;
     background-color: rgb(241, 241, 241);
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     transform: translateX(100%);
     transition: transform 0.5s ease-in;
   }

   .nav-links li{
     opacity: 0;
   }
 
   .burguer{
     display: block;
     cursor: pointer;
   }
 }

 .nav-active{
   transform: translateX(0%);
 }

The result is just visible if we resize our windows to a resolution lower then 768px. This is, our burger button is visible when we are watching our page on a device with this resolution, otherwise it is hidden and the main menu is visible.

Step 6:

At this point, we need to add some javascript code to our nav bar in order to give it some behavior. So, add a js file (I called it app.js) and link it to the Html file. Add the following code:

const navSlide = () => {
   const burguer = document.querySelector('.burguer');
   const nav = document.querySelector('.nav-links');
   burguer.addEventListener('click', () => {
     nav.classList.toggle('nav-active');
   });
 }
 navSlide();

The result is, our burger button is going to show/hide the menu.

Step 7:

To finish this guide, we are going to add some styles just to make a little bit funny our nav bar.

On your css file:
@keyframes navLinkFade{
   from{
     opacity: 0;
     transform: translateX(50px);
   }
   to{
     opacity: 1;
     transform: translateX(0px);
   }
}

.toggle .line1{
   transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2{
   opacity: 0;
}
.toggle .line3{
   transform: rotate(45deg) translate(-5px, -6px);
}

The js file must looks like this:
const navSlide = () => {
   const burguer = document.querySelector('.burguer');
   const nav = document.querySelector('.nav-links');
   const navLinks = document.querySelectorAll('.nav-links li');

   //Toggle Nav
   burguer.addEventListener('click', () => {
     nav.classList.toggle('nav-active');

    //Animate Links 
    navLinks.forEach((link, index) => {
     if(link.style.animation){
       link.style.animation = '';   
     }else{
       link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
     }
    });
   });
}

I hope this guide helps you. Here you can download the files.