header-nav

Summary

A pill-shaped dark navbar that sits inside a max-1400 container at the top of every page. It pairs a 200px logo with a right-aligned uppercase menu, and marks the active item with a 2px orange underline.

HTML structure (minimal)

<div class="header">
  <div class="main-container">
    <div class="header-inner">
      <a href="index.html" class="logo"><img src="images/logo.png" class="logo-img" alt=""></a>
      <nav class="main-menu">
        <a href="index.html" class="menu-item w--current">Home</a>
        <a href="about.html" class="menu-item">About</a>
        <a href="works.html" class="menu-item">work</a>
        <a href="blog.html" class="menu-item">blog</a>
        <a href="contact.html" class="menu-item">contact</a>
      </nav>
      <div class="menu-button"><div class="icon w-icon-nav-menu"></div></div>
    </div>
  </div>
</div>

Key SCSS tokens

.header { padding-top: 40px; }
.header-inner {
  background-color: var(--grey);     // #1e1e1e
  border: 1px solid #292929;
  border-radius: 5px;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-item {
  color: var(--white);
  text-transform: uppercase;
  margin: 0 15px;
  padding: 10px 0;
  font-size: 17px;
  font-weight: 300;
  border-bottom: 2px solid var(--transparent);
}
.menu-item:hover           { color: var(--default); }   // #dc5f00
.menu-item.w--current      { border-bottom-color: var(--default); }
.logo-img                  { width: 200px; }

Notable details

• The whole bar is a rounded card sitting 40px below the page edge, not a fixed top strip — gives the feel of a "control panel" pinned to the page.
• Active state is a 2px orange underline rather than a fill — keeps the bar quiet while still readable.
• Mobile nav button (.w-icon-nav-menu) is part of Webflow's icon font (webflow-icons declared in layout.css), so no SVG asset is needed.

Use when

• Studio / portfolio sites that want a calm, type-led nav without sticky scroll behaviour.
• Layouts where the nav should feel like content (sits inside the same container as everything else) rather than chrome.

Caveats

• This is a Webflow export; the responsive breakpoint and burger menu logic come from js/plugins.js (Webflow runtime). If you port this, you must rebuild that toggle yourself.