Construction company header

When to use it

The header for every page of a design-build or renovation company site. It stays to one row with four items because people researching a builder jump between finished projects, services and the process several times before they get in touch, and each of those should be one tap away. Projects comes first on purpose: for a builder, photos of finished work answer more questions than any page of copy. Request a quote is the only filled element in the bar, in the same dark tone as the type, so it reads as part of an architectural layout rather than a sales banner. Replace the wordmark with your company name first, then point the Process link at wherever you explain how a job runs. If most first contacts in your area still come by phone, add the number as a fourth link with a tel: address; homeowners comparing three builders often call the one whose number they can see.

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

• Request a quote has a dark background and short text, so it converts to a Button widget; the wordmark and the three navigation links arrive as Text Editor widgets with their links kept, not as a Nav Menu.
• Use the converted block as 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 the theme header.
• Below 780px the row stacks: the wordmark centers above the links, which wrap beneath it. There is no hamburger menu, so keep the labels short.
• The link targets (/projects/, /services/, /#process, /quote/) are placeholders; change them to your real page URLs after import.

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>Construction company header</title>
  <style>
    body{margin:0;font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;color:#1c1d1f;background:#f3f1ec}
    .bar{background:#f3f1ec;border-bottom:1px solid #d9d5cd}
    .inner{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{margin:0;font-family:'Archivo',Arial,sans-serif;font-size:21px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1c1d1f}
    .logo a{color:#1c1d1f;text-decoration:none}
    .nav{display:flex;align-items:center;gap:34px}
    .link{color:#1c1d1f;text-decoration:none;font-size:15px;font-weight:500}
    .quote{display:inline-block;padding:13px 22px;background:#1c1d1f;color:#f3f1ec;border-radius:3px;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.logo{font-size:19px}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:14px}.quote{padding:10px 16px;font-size:12px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <p class="logo"><a href="/">Corbel Design-Build</a></p>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/projects/">Projects</a>
        <a class="link" href="/services/">Services</a>
        <a class="link" href="/#process">Process</a>
        <a class="quote" href="/quote/">Request a quote</a>
      </nav>
    </div>
  </header>
</body>
</html>