उत्तरदायी HTML और CSS नेवबार टेम्पलेट

1318 lebdev

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

23 August 2025

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

20 November 2025

स्व-विनाश उलटी गिनती HTML टेम्पलेट

22 October 2025

सोशल मीडिया लिंक कार्ड HTML टेम्पलेट

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Navbar</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

nav {
      background-color: #333;
      color: white;
      padding: 0.75rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.logo {
      font-size: 1.5rem;
      font-weight: bold;
    }

.nav-links {
      display: flex;
      gap: 1.5rem;
    }

.nav-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }

.nav-links a:hover {
      color: #f0a500;
    }

.hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

.hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

@media (max-width: 768px) {
      .nav-links {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0;
        width: 100%;
        text-align: center;
      }

.nav-links.active {
        display: flex;
      }

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

<nav>
  <div class="logo">MySite</div>
  <div class="hamburger" onclick="toggleMenu()">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="nav-links" id="navLinks">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>
</nav>

</body>
</html>

अनुशंसित

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

स्व-विनाश उलटी गिनती HTML टेम्पलेट

सोशल मीडिया लिंक कार्ड HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS