Responsive Navbar Property in CSS

This is a responsive navigation bar is a UI element in the website which contains links to other sections of the website.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="navbar">
    <div class="logo">Tutor Joe's</div>
    <a href="#" class="btn">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="navbar-links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Download</a></li>
      </ul>
    </div>
  </div>
  <script src="js/script.js"></script>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

*{
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2c3e50;
  color:white;
}

.logo{
  font-size: 20px;
  font-weight: 500;
  margin:8px;
}

.navbar-links ul{
  display: flex;
}

.navbar-links ul li{
  list-style: none;
}

.navbar-links ul li a{
  color:white;
  text-decoration: none;
  padding: 16px;
  display: block;
}

.navbar-links ul li:hover{
background-color: #34495e;
}

.btn{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 22px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}

.bar{
  height: 3px;
  width: 100%;
  background-color: #fff;
}

@media (max-width:600px) {
  .btn{
    display: flex;
  }
  .navbar-links{
    display: none;
    width: 100%;
  }

  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul{
    flex-direction: column;
    width: 100%;
  }
  .navbar-links ul li{
    text-align: center;
  }
  .navbar-links.active{
    display: flex;
  }
}

script.js

const btn=document.getElementsByClassName('btn')[0];
const navbar=document.getElementsByClassName('navbar-links')[0];

btn.addEventListener('click',()=>{
  navbar.classList.toggle('active');
});

Output

Responsive Navbar Property in CSS

Source Code :

style.css

script.js

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects