Photographer header

When to use it

The bar that sits above the one page and stays the same from top to bottom. On a one-page site the navigation does a different job from a normal menu: instead of opening new pages, each link jumps down the page to a section, so the labels name the sections a couple scrolls through — the work, the photographer, the packages. The fourth link matters most, so it is styled as an outlined button and phrased as the question couples actually have: is my date free? Replace the name first, and keep it as text rather than a logo image unless your logo still reads at 24px on a phone. Keep the links to three or four short words; there is no hamburger menu, and on a phone they sit on one centered line with the button below. If most couples find you on Instagram, add a fourth text link to your profile, but keep Check your date as the only button.

What it converts to

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

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

Things worth knowing

• Check your date has a border and a small corner radius, so it converts to a Button widget that keeps its #contact link; the name and the Work, About and Packages links arrive as Text Editor widgets, not as a Nav Menu.
• The converter leaves the header’s anchor links exactly as written (#work, #about, #packages, #contact). They scroll only once the matching sections of the one page carry those CSS IDs — see the notes on the one-page template.
• On a one-page site you can paste the converted header at the top of the page itself; Elementor Theme Builder (Elementor Pro) is only needed if you want it as a site-wide header template.
• Below 780px the row stacks and centers: name, then the three links on one line, then the button. There is no hamburger menu, and the bar does not stay fixed while scrolling unless you turn on Sticky under Advanced → Motion Effects in Elementor Pro.

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>Photographer header</title>
  <style>
    body{margin:0;font-family:'Work Sans',Helvetica,Arial,sans-serif;color:#2e2a33;background:#fcf9f7}
    .bar{background:#fcf9f7;border-bottom:1px solid #e6d3cd}
    .inner{max-width:1160px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;font-weight:500;letter-spacing:.02em;color:#2e2a33}
    .logo a{color:#2e2a33;text-decoration:none}
    .nav{display:flex;align-items:center;gap:34px}
    .link{color:#2e2a33;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
    .date{display:inline-block;padding:12px 22px;border:1px solid #8e5559;color:#8e5559;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border-radius:3px}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:16px 16px;gap:12px}.logo{font-size:24px;text-align:center}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:12px;letter-spacing:.14em}.date{padding:10px 16px;font-size:12px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <p class="logo"><a href="/">Hattie Calloway Photography</a></p>
      <nav class="nav" aria-label="Main">
        <a class="link" href="#work">Work</a>
        <a class="link" href="#about">About</a>
        <a class="link" href="#packages">Packages</a>
        <a class="date" href="#contact">Check your date</a>
      </nav>
    </div>
  </header>
</body>
</html>