sticky-minimal-header

Summary

A minimal sticky header that shows only the wordmark (left) and a single 9-dot grid icon (right). The dot icon opens a full-height off-canvas sidebar with the entire site menu, an About blurb, a contact list, and social links. Fewer pixels of header chrome means more visual room for the hero photography.

HTML structure (minimal)

<header class="header sticky-active">
  <div class="primary-header">
    <div class="primary-header-inner">
      <div class="header-logo">
        <a href="index.html"><img class="logo-dark" src="assets/img/logo/logo-2.png" alt="Logo"></a>
      </div>
      <div class="header-right-wrap">
        <div class="header-menu-wrap">
          <div class="mobile-menu-items">
            <ul>
              <li class="menu-item-has-children active mega-menu"><a href="index.html">Home</a><ul>...</ul></li>
              <li class="menu-item-has-children"><a href="#">Pages</a><ul>...</ul></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
        <div class="header-right">
          <div class="sidebar-icon">
            <button class="sidebar-trigger open">
              <svg width="24" height="23" viewBox="0 0 24 23"><!-- 9 squares --></svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<div id="sidebar-area" class="sidebar-area">...full off-canvas menu...</div>

Key SCSS tokens

.header.sticky-active {
  &.fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 999;
    background-color: var(--rr-color-bg-1); transition: background 0.3s ease; }
  .primary-header-inner { display: flex; justify-content: space-between; align-items: center;
    padding: 25px 60px; }
  .sidebar-icon .sidebar-trigger { background: transparent; border: 0; color: var(--rr-color-common-white); }
}
.sidebar-area {
  position: fixed; top: 0; right: -480px; width: 480px; height: 100vh;
  background: var(--rr-color-bg-1); transition: right 0.4s ease; z-index: 1001;
}
body.open-sidebar .sidebar-area { right: 0; }

Animation logic

// Sticky on scroll past 10 px (desktop only)
var minWidth = window.matchMedia("(min-width: 992px)");
function menuSticky(w) {
  if (w.matches) {
    $(window).on("scroll", function () {
      $(".header").toggleClass("fixed", $(window).scrollTop() >= 10);
    });
  }
}
if ($(".header").hasClass("sticky-active")) menuSticky(minWidth);

// Sidebar open/close via .sidebar-trigger
$(document).on("click", ".sidebar-trigger", function (e) {
  e.preventDefault();
  $("body").toggleClass("open-sidebar");
});
$(document).on("click", ".sidebar-trigger.close, #sidebar-overlay", function (e) {
  e.preventDefault();
  $("body.open-sidebar").removeClass("open-sidebar");
});

// MeanMenu mirrors the desktop menu into the sidebar drawer for mobile collapse
$(".mobile-menu-items").meanmenu({
  meanMenuContainer: ".side-menu-wrap", meanScreenWidth: "992",
});

Notable details

• The visible header has zero menu links — the hamburger UI is replaced with a 9-dot SVG grid that reads more "design tool" than "navigation drawer".
• Both the floating menu trigger and the sidebar's close X share the same .sidebar-trigger class, distinguished only by .open / .close modifiers — a single delegated click handler covers both.
• MeanMenu is invoked at the 992 px breakpoint, so the mobile collapse uses the same off-canvas container as the desktop sidebar — single drawer drives both modes.

Use when

• Heavy-photography landing pages where header chrome must stay out of the way.
• Agency/portfolio sites where the icon-grid trigger fits the studio aesthetic.
• Designs that already commit to an off-canvas full menu (hides nav depth gracefully).

Caveats

• The drawer is right-aligned at fixed 480 px; needs SCSS edits to switch to LTR cultures preferring left-aligned drawers (but RTL variants are shipped).
• The 9-dot grid SVG is inline; updating the icon means editing every page that ships the header.