Navbars

A responsive navigation bar with a hamburger menu for smaller screens:

<nav class="navbar-black">
  <div class="container">
    <div class="navbar-brand">
      <a href="/">
        <img
          src="https://badgecraft.online/assets/Badge-DPK_GDWB.png"
          alt="gfg_logo"
        />
      </a>
    </div>
    <div class="hamburger-menu">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>
    <div class="nav-menu bg-white hide">
      <a href="#" class="text-white">Home</a>
      <a href="#" class="text-white">Career</a>
      <a href="#" class="text-white">About</a>
      <a href="#" class="text-white">Contact</a>
    </div>
  </div>
</nav>

Key Features

1. Dark-Themed Navbar: Uses .navbar-black to apply a black theme to the navigation bar.

2. Branding: .navbar-brand includes a clickable logo that links to the homepage.

3. Responsive Design: .hamburger-menu allows toggling the visibility of the navigation menu on smaller screens.

4. Hidden Menu: .nav-menu.bg-white.hide initially hides the menu and uses a white background. Links styled with .text-white are made visible by removing the .hide class dynamically.

5. Navigation Links: Links to different sections like Home, Career, About, and Contact, enhancing site navigation.