Navigation · Convert Brand

Examples

Desktop

Mobile

The navbar is a fixed, page-level block. See it live at the top of any Convert page (e.g. the LPs). Below is how to add it.

The navbar is a single .navbar-wrapper pinned to the top of the page. Its anatomy: the Convert logo sits on the left; the primary nav links (Features, Pricing, For Agencies, Request a Demo, Company) run along the left/center; the actions group sits on the right with a ghost Log In link and an outline Try For Free button. Below 640px the links and actions collapse behind a hamburger that opens a full-screen dark overlay menu.

Usage

The navbar is self-contained: copy the entire block from /_shared/components/navbar.html (its HTML, <style>, and <script>) into your page's <body>. It needs /_shared/tokens.css and /_shared/components/buttons.css linked in the <head>, and the logo SVGs reachable at the paths it references.

Copy the ENTIRE /_shared/components/navbar.html block (HTML + its <style> + <script>) into your <body>. It's self-contained.
Keep exactly one navbar per page; it's a fixed page-level block, not a repeatable component.
Don't restyle it per page, the scroll, blur, and hide behaviors are tuned to ship identically across every Convert surface.
Give your <body> a padding-top of var(--navbar-height), or let the hero compensate, so content isn't hidden under the fixed nav.

States

The wrapper carries the state via classes the scroll handler toggles:

Default: transparent over the hero, no border. The links read in ink over the page background.
Scrolled (.scrolled, past 20px), a translucent white background with backdrop-filter: blur and a faint bottom border.
Hidden (.hidden), on scroll-down past 80px the wrapper slides up with translateY(-100%); scrolling back up reveals it again.
Mobile: below 640px the links and actions hide and the hamburger opens a full-screen dark overlay menu (.mob-menu.open), locking body scroll until closed.

Code

Paste the full block from /_shared/components/navbar.html into your <body>. The top-level structure is the fixed wrapper around the <nav>, plus the mobile overlay:

<!-- Copy the full block from /_shared/components/navbar.html into your <body> -->

<div class="navbar-wrapper" id="navbar">
  <nav class="navbar" aria-label="Primary">
    <a href="https://www.convert.com" class="navbar-logo">…</a>
    <ul class="navbar-nav">
      <li><a href="…">Features</a></li>
      <!-- Pricing, For Agencies, Request a Demo, Company… -->
    </ul>
    <div class="navbar-actions">
      <a href="…" class="btn-ghost">Log In</a>
      <a href="…" class="btn-outline">Try For Free</a>
    </div>
    <button class="mob-hamburger" id="mobHamburger">…</button>
  </nav>
</div>