Salon header

When to use it

The header for every page of the salon site, kept to a single light row so the photos and prices below it stay in view on a phone. It carries what a client looks for when they land from a map listing or a friend’s link: the salon name, the services and prices, the people, how to find you, and a way to book. Book an appointment is the only filled element in the bar, so it stays easy to find whichever page someone opens first. Replace the wordmark with your salon’s name, then point the button at wherever you really take bookings — the booking page in this kit, or the link from your salon software if clients book online there. Many salon clients rebook from their phone in the evening when the desk is closed, so check that the button works on a narrow screen and does not lead to a page that only says “call us”.

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 an appointment has a filled 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 shows 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 button, which fit on one line at 390px and wrap on narrower screens. There is no hamburger menu, so keep the labels short.
• The link targets (/services/, /team/, /book/) are placeholders 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>Salon header</title>
  <style>
    body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2f2635;background:#faf8f5}
    .bar{background:#faf8f5;border-bottom:1px solid #ede6dc}
    .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:'Fraunces',Georgia,serif;font-size:25px;font-weight:600;letter-spacing:-.01em;color:#2f2635}
    .logo a{color:#2f2635;text-decoration:none}
    .nav{display:flex;align-items:center;gap:30px}
    .link{color:#2f2635;text-decoration:none;font-size:15px;font-weight:600}
    .book{display:inline-block;padding:11px 22px;border-radius:10px;background:#4e6e61;color:#faf8f5;text-decoration:none;font-size:15px;font-weight:700}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:14px 16px;gap:12px}.logo{font-size:22px}.nav{gap:18px;flex-wrap:wrap;justify-content:center}.link{font-size:14px}.book{padding:9px 16px;font-size:14px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <p class="logo"><a href="/">Linnea Hair & Skin</a></p>
      <nav class="nav" aria-label="Main">
        <a class="link" href="/services/">Services</a>
        <a class="link" href="/team/">Team</a>
        <a class="link" href="/book/#visit">Visit</a>
        <a class="book" href="/book/">Book an appointment</a>
      </nav>
    </div>
  </header>
</body>
</html>