Restaurant header

When to use it

The header shared by every page of the restaurant site, kept to one slim row so the dining-room photo below it is not pushed down on a phone. It holds only what a hungry visitor looks for: the name, the menu, who you are, where you are, and a way to book. The Book a table button is the one colored element in the bar, so it is the first thing the eye lands on whichever page someone arrives on from search or a map listing. Replace the wordmark text with your restaurant’s name first, then point Book a table at whatever you actually take reservations with — your own contact page, as here, or a booking service link. If most of your bookings come by phone, change the button label to the number and make it a tel: link; on mobile that is one tap instead of a form.

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

• Book a table has a terracotta 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.
• Put the converted block 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 the theme header.
• Below 780px the row stacks: the wordmark centers above the links and the links wrap beneath it. There is no hamburger menu, so keep the labels short.
• The link targets (/menu/, /about/, /contact/) are placeholders carried over from the HTML; 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>Restaurant header</title>
  <style>
    body{margin:0;font-family:'Lato',Helvetica,Arial,sans-serif;color:#231f1b;background:#f6efe3}
    .bar{background:#f6efe3;border-bottom:1px solid #e9dcc6}
    .inner{max-width:1160px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .logo{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:700;letter-spacing:-.01em;color:#231f1b}
    .logo a{color:#231f1b;text-decoration:none}
    .nav{display:flex;align-items:center;gap:28px}
    .link{color:#231f1b;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
    .book{display:inline-block;padding:11px 20px;border-radius:999px;background:#a64b2f;color:#f6efe3;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.logo{font-size:23px}.nav{gap:16px;flex-wrap:wrap;justify-content:center}.link{font-size:13px}.book{padding:9px 16px;font-size:13px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <p class="logo"><a href="/">Linden & Salt</a></p>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/menu/">Menu</a>
        <a class="link" href="/about/">About</a>
        <a class="link" href="/contact/">Visit</a>
        <a class="book" href="/contact/#book">Book a table</a>
      </nav>
    </div>
  </header>
</body>
</html>