Creative agency header

When to use it

The navigation bar for a small studio site, kept to the three things a prospective client looks for (the work, the services and who you are) plus the one action you want from them. The pink Start a project button is the only colored element in the bar, so it stays the brightest thing at the top of every dark page, whether someone lands on a case study from a portfolio directory or on the services page from search. Replace the wordmark first: if you have a logo file, swap the text for an Image widget after import and keep it under about 32 pixels tall so the bar stays slim. The Studio link points at the studio section of the home page; if you add a separate team page later, change it there. A tip for agencies: resist adding Blog, Careers and Journal to the main bar. Put them in the footer and keep the header about winning projects.

What it converts to

Converted with the Native components mode. The component list below is what this template produces — not a generic example.

• Container × 5
• HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
• Text Editor × 4
• Button × 1

Things worth knowing

• The wordmark and the Work, Services and Studio links arrive as Text Editor widgets with their links kept, not as a Nav Menu. Start a project has a pink background and short text, so it converts to a Button widget.
• The near-black background is written on the outer Container, so the bar stays dark even when your theme’s page background is white.
• Below 780px the wordmark and links stack on the left and the button stays on the right of the first row. There is no hamburger menu, so keep the link labels short.
• Put it in an Elementor Theme Builder header template (Elementor Pro) so it appears on every page; without Pro, paste it at the top of each page or keep your theme header.

The HTML

This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Agency header</title>
  <style>
    body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#f2efe9;background:#0e0e10}
    .bar{background:#0e0e10;border-bottom:1px solid #2a2a31}
    .inner{max-width:1180px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{margin:0;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.03em;color:#f2efe9}
    .logo a{color:#f2efe9;text-decoration:none}
    .left{display:flex;align-items:center;gap:56px}
    .nav{display:flex;align-items:center;gap:32px}
    .link{color:#f2efe9;text-decoration:none;font-size:15px;font-weight:500}
    .start{display:inline-block;padding:11px 20px;border-radius:999px;background:#ff4d8d;color:#0e0e10;text-decoration:none;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:15px;font-weight:700}
    @media(max-width:780px){.inner{align-items:flex-start;padding:14px 16px;gap:16px}.left{flex-direction:column;align-items:flex-start;gap:8px}.logo{font-size:22px}.nav{gap:20px}.link{font-size:15px}.start{padding:9px 16px;font-size:14px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <div class="left">
        <p class="logo"><a href="/">Lowtide Studio</a></p>
        <nav class="nav" aria-label="Main">
          <a class="link" href="/work/">Work</a>
          <a class="link" href="/services/">Services</a>
          <a class="link" href="/#studio">Studio</a>
        </nav>
      </div>
      <a class="start" href="/contact/">Start a project</a>
    </div>
  </header>
</body>
</html>