transparent-mega-menu-header

Summary

Fixed transparent header with a logo, primary mainmenu, a 10-column mega-menu showing screenshots of every homepage variant, a phone widget, a burger drawer trigger and a side off-canvas trigger.

HTML structure (minimal)

<header class="transparent">
  <div class="container">
    <div class="de-flex">
      <div class="de-flex-col">
        <div id="logo"><a href="index.html"><img class="logo-main" src="images/logo.webp" alt=""></a></div>
      </div>
      <div class="de-flex-col header-col-mid">
        <ul id="mainmenu">
          <li>
            <a class="menu-item" href="index.html">Home</a>
            <ul class="mega px-lg-5">
              <li>
                <div class="container-fluid">
                  <div class="sb-menu p-4">
                    <div class="row g-3">
                      <div class="col-md-1-5 col-6 text-center">
                        <div class="relative hover overflow-hidden soft-shadow">
                          <a class="p-0" href="index.html">
                            <img src="images/demo/homepage-1.webp" class="w-100 hover-scale-1-1" alt="">
                          </a>
                        </div>
                        <h5 class="mt-2 mb-0">Homepage 1</h5>
                      </div>
                      <!-- ...more demo thumbnails -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li><a class="menu-item" href="practice-areas-1.html">Practice Areas</a><ul>...</ul></li>
          <li><a class="menu-item" href="about.html">About</a></li>
          <li><a class="menu-item" href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div class="de-flex-col">
        <div class="d-widget-phone sm-hide">
          <div class="h-phone"><span>Need Help?</span><i class="fa fa-phone"></i> 1 200 300 9000</div>
        </div>
        <div class="menu_side_area"><span id="menu-btn"></span></div>
        <div id="btn-extra"><span></span><span></span></div>
      </div>
    </div>
  </div>
</header>

Key SCSS tokens

header.transparent {
  background: transparent;
  position: absolute;
  width: 100%;
  z-index: 100;
}
header.smaller { /* shrunk-on-scroll state with white bg */ }

#mainmenu li ul.mega {
  position: absolute;
  left: 0;
  width: 100vw;
  background: #fff;
  padding: 1rem;
}
.col-md-1-5 { flex: 0 0 20%; max-width: 20%; }
.hover-scale-1-1 { transition: transform .3s ease; }
.hover:hover .hover-scale-1-1 { transform: scale(1.1); }
.soft-shadow { box-shadow: 0 6px 30px rgba(0,0,0,.08); }

Animation logic

// Header shrinks once user scrolls past threshold
$(window).scroll(function () {
  if ($(this).scrollTop() > 50) $('header').addClass('smaller');
  else $('header').removeClass('smaller');
});
// Mega-menu thumbnails zoom on hover via CSS .hover-scale-1-1

Notable details

• The mega-menu is the home picker itself: 10 thumbnails of every demo variant, each with hover-scale on the image — saves a separate "demos" landing page.
• Bootstrap's grid is extended with a col-md-1-5 (5-per-row, 20% width) to fit ten thumbnails in two rows.
• A separate burger (#menu-btn) and side trigger (#btn-extra) coexist — one toggles the mobile menu, the other opens the off-canvas marketing drawer.
• Logo has three swaps (logo-main, logo-scroll, logo-mobile) for the white/dark/mobile states.

Use when

• A multi-variant template wants users to preview homepages directly from the navbar.
• A design-system landing page that wants its menu to act as a visual catalogue.
• Any service site that needs a phone CTA and side drawer on top of a normal menu.

Caveats

• col-md-1-5 is a custom utility, not standard Bootstrap — copy it explicitly.
• Mega-menu width assumes <header> is full-width; nesting inside narrower wrappers requires reposition.