site-navbar-mega-menu

Summary

Fixed top navbar with a blur backdrop and a bord underline. Five top-level items (Demos, Pages, Portfolio, Blogs, Contact); the Demos item opens a five-column mega-menu where every cell is a thumbnail-and-label tile that links to one of the home variants. After 300px of scroll, a .nav-scroll modifier is added for a denser background. Each link label uses the rolling-text per-letter hover effect.

HTML structure (minimal)

<nav class="navbar navbar-expand-lg bord blur">
  <div class="container o-hidden">
    <a class="logo icon-img-100" href="#"><img src="/assets/imgs/logo-light.png" alt="logo" /></a>
    <button class="navbar-toggler" type="button"><span class="icon-bar"><i class="fas fa-bars"></i></span></button>
    <div class="collapse navbar-collapse justify-content-center">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#"><span class="rolling-text">Demos</span></a>
          <div class="dropdown-menu mega-menu">
            <div class="container"><div class="row">
              <div class="col-lg"><a class="item-img text-center" href="/home-main">
                <span class="img"><img src="/assets/imgs/menu/1.png" alt="" /></span>
                <span class="mt-15">Main Home</span>
              </a></div>
              <!-- 4 more demo tiles -->
            </div></div>
          </div>
        </li>
        <!-- Pages / Portfolio / Blogs dropdowns + Contact -->
      </ul>
    </div>
    <div class="contact-button">
      <a href="/page-contact" class="butn butn-sm butn-bg main-colorbg radius-5"><span class="text">Let's contact</span></a>
    </div>
  </div>
</nav>

Key SCSS tokens

.navbar.blur {
  position: fixed;
  top: 0; left: 0; right: 0;
  backdrop-filter: blur(10px);
  background: rgba(15, 15, 15, .6);
  z-index: 99;
}
.navbar.nav-scroll { background: $main_bg; }
.mega-menu .item-img .img {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .4s ease;
}
.mega-menu .item-img:hover .img { transform: translateY(-4px); }
.rolling-text { /* see magnetic-cursor + rolling.js */ }

Animation logic

// components/common/Navbar.jsx
function handleScroll() {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 300) navbar.classList.add('nav-scroll');
  else navbar.classList.remove('nav-scroll');
}
function handleDropdownMouseMove(e) {
  e.currentTarget.querySelector('.dropdown-menu').classList.add('show');
}
function handleDropdownMouseLeave(e) {
  e.currentTarget.querySelector('.dropdown-menu').classList.remove('show');
}

Notable details

• Mouse-driven dropdown show/hide uses mousemove (not mouseenter) so quick passes still register on Mac trackpads.
• The mega-menu sells the other four home variants visually instead of as a text list — useful pattern when your product is the template pack.
• Bootstrap 5 dropdown classes are reused for markup, but JS handlers are custom (no jQuery).
• Contact button uses main-colorbg (orange #fd5b38) for high-contrast CTA on the dark blurred bar.

Use when

• Multi-template product where the menu doubles as a demo gallery.
• Dark-mode sites that want a glass-style fixed nav with state on scroll.
• React/Next sites that need Bootstrap markup but no jQuery dependency.

Caveats

• Mega-menu images live under /public/assets/imgs/menu/; if you reuse the markup elsewhere, update those paths or the cells render broken.
• Menu uses data-toggle (Bootstrap 4 style) attributes, but Bootstrap 5 is shipped — works only because of the custom React handlers, not the Bootstrap JS.