Responsive Navbar with HTML, CSS & JavaScript

GFX CLICK
19 Jul, 2025

 



✅ Responsive Navbar with HTML, CSS & JavaScript


<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Responsive Navbar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
    }

    nav {
      background-color: #2c3e50;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      flex-wrap: wrap;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
    }

    .menu {
      display: flex;
      gap: 20px;
    }

    .menu a {
      color: white;
      text-decoration: none;
      font-size: 16px;
    }

    .hamburger {
      display: none;
      font-size: 24px;
      cursor: pointer;
    }

    @media screen and (max-width: 768px) {
      .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #34495e;
        margin-top: 10px;
      }

      .menu a {
        padding: 10px;
        border-top: 1px solid #2c3e50;
      }

      .menu.active {
        display: flex;
      }

      .hamburger {
        display: block;
      }
    }
  </style>
</head>
<body>

  <nav>
    <div class="logo">আমার সাইট</div>
    <div class="hamburger" onclick="toggleMenu()">☰</div>
    <div class="menu" id="nav-menu">
      <a href="#">হোম</a>
      <a href="#">আমাদের সম্পর্কে</a>
      <a href="#">সেবা</a>
      <a href="#">যোগাযোগ</a>
    </div>
  </nav>

  <script>
    function toggleMenu() {
      const menu = document.getElementById('nav-menu');
      menu.classList.toggle('active');
    }
  </script>

</body>
</html>

🔍 কী কী শিখলে এখানে:

ফিচারকাজ
.hamburgerমোবাইলে ☰ আইকন দেখায়
@mediaছোট স্ক্রিনে ডিজাইন বদলায়
toggleMenu()ক্লিক করলে মেনু খুলে/বন্ধ হয়
menu.classList.toggle('active')CSS ক্লাস দিয়ে মেনু দেখায় বা লুকায়

GFX CLICK

GFX CLICK

I Want to Provide a Best Graphics Design Service and Digital IT Solutions.

Next Post Previous Post
No Comment
Add Comment
comment url