main-navbar

Summary

Sticky white Bootstrap navbar with a left logo, a right-aligned dropdown menu group ("Home, About Us, Services, Pages, Blog, Contact Us") and an amber hamburger toggle on mobile. The whole header is position: sticky; top: 0, so it pins on scroll without JS.

HTML structure (minimal)

<header class="sticky-top bg-white">
  <div class="r-container">
    <nav class="navbar navbar-expand-xl">
      <div class="container-fluid ps-3">
        <div class="logo-container">
          <a class="navbar-brand" href="#"><img src="image/logo.png" class="img-fluid"></a>
        </div>
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <i class="fa-solid fa-bars-staggered accent-color-2"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto gap-xl-4 gap-1">
            <li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">About Us</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="about.html">About Us</a></li>
                <li><a class="dropdown-item" href="team.html">Team</a></li>
              </ul>
            </li>
            <!-- ...Services / Pages / Blog dropdowns... -->
            <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</header>

Key SCSS tokens

header.sticky-top { background: #fff; }
.logo-container   { max-width: 180px; }
.navbar-toggler   { border: none; }
.navbar-toggler i { color: var(--accent-color-2); }

Animation logic

// js/script.js — adds a glass-effect class once scroll exceeds 100px.
// The header in index.html does not currently carry id="header",
// so this hook is wired but inert on the demo page.
$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  if (scroll > 100) $("#header").addClass('glass-effect');
  else              $("#header").removeClass('glass-effect');
});

Notable details

• Uses native Bootstrap 5 dropdowns and collapse — no custom JS to maintain.
• navbar-expand-xl means the burger appears below 1200px, which suits law firms whose menus are long.
• The amber fa-bars-staggered icon is a less generic alternative to the standard three-line burger.

Use when

• A multi-section corporate site whose nav needs 4–6 dropdown groups.
• Any site already on Bootstrap 5 where you want a sticky header without writing scroll handlers.

Caveats

• The glass-effect scroll handler targets #header, but the markup uses <header> without an id — either add id="header" or change the selector. Currently the scroll-to-glass behavior is dead code on the demo.