Header bar with navigation and button

When to use it

A header for a small service business, studio or consultancy: the name on the left, five links to the pages visitors actually look for, and one button for the action you most want them to take. Five links is a deliberate ceiling; anything past that usually belongs in the footer. The button is kept apart from the links because it should be the only thing in the bar that reads as clickable at a glance, so label it with the real next step, such as “Book a call” or “Request a quote”, rather than “Get started”. Replace the wordmark first, then each link label and its URL. A header belongs in Elementor Theme Builder as a site-wide template, and Theme Builder is part of Elementor Pro; on the free version, paste the bar at the top of each page or keep your theme’s own header. Most enquiries to service businesses start on a phone, and below 780px the bar stacks so the button stays visible without opening a menu.

What it converts to

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

• pending

Things worth knowing

• The wordmark and the five navigation links each arrive as a Text Editor widget holding a link. They are static links, not a WordPress menu, so adding a page means editing the header. If you want a menu managed under Appearance → Menus with a hamburger toggle, replace the link row with Elementor Pro’s Nav Menu widget.
• “Book a call” becomes a real Button widget because it has a background color and short text; set its hover color in Elementor after import, since hover states cannot be read from static HTML.
• Below 780px the bar Container switches from a row to a column and the link row is set to wrap. Both values are written into Elementor’s mobile settings, so the stacked layout works without any custom CSS.
• To use it site-wide with Elementor Pro: Templates → Theme Builder → Header, paste the converted block, then set the display condition to Entire Site.

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>Header bar with navigation and button</title>
  <style>
    body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
    .site-header{background:#fff;border-bottom:1px solid #e3e9f1}
    .bar{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:32px}
    .brand{font-size:21px;font-weight:800;letter-spacing:-.02em;color:#14233a;text-decoration:none}
    .nav{display:flex;align-items:center;gap:30px;margin-left:auto}
    .nav a{font-size:15px;font-weight:600;color:#3b4d66;text-decoration:none}
    .cta{display:inline-block;padding:12px 22px;border-radius:9px;background:#ff5b35;color:#fff;font-size:15px;font-weight:700;text-decoration:none}
    @media(max-width:780px){
      .bar{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 20px}
      .nav{margin-left:0;flex-wrap:wrap;gap:10px 22px}
      .cta{padding:11px 20px}
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="bar">
      <a class="brand" href="/">Larkfield Studio</a>
      <nav class="nav" aria-label="Main">
        <a href="/services/">Services</a>
        <a href="/work/">Work</a>
        <a href="/process/">Process</a>
        <a href="/about/">About</a>
        <a href="/faq/">FAQ</a>
      </nav>
      <a class="cta" href="/contact/">Book a call</a>
    </div>
  </header>
</body>
</html>