Responsive Navigation Bar

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.

3 comentarios sobre “Responsive Navigation Bar

  1. Can I just say what a relief to search out someone who actually knows what theyre speaking about on the internet. You positively know easy methods to convey an issue to gentle and make it important. Extra individuals have to learn this and perceive this aspect of the story. I cant imagine youre no more widespread since you undoubtedly have the gift.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *