Fitness studio header

When to use it

Built for a gym or studio where the free trial is the main conversion, so the button sits in the header on every page instead of only in the hero. The bar holds just four things: the studio name, Classes, Timetable and Membership. Those are the three pages a first-time visitor checks before booking, and a longer menu pushes the button off a phone screen. On narrow screens the links drop to a second row under the name while the button stays on the first, so nobody has to open a hamburger menu to find the timetable. Replace the studio name first, then point the three links at your real pages. A tip for studios: members often check the timetable from the parking lot or the bus stop, so test the header on a phone and make sure Timetable is one tap away from any page.

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

• The studio name and the three menu links arrive as Text Editor widgets, not as a Nav Menu. Link them to your pages in place, or replace them with a WordPress menu through the Nav Menu widget, which needs Elementor Pro.
• The Free trial link has a background color and short text, so it converts to a real Button widget.
• Below 780px the bar wraps: name and button stay on the first row and the three links spread across a second row. Check the wrap in Elementor’s mobile view after import.
• As a site-wide header it belongs in Theme Builder (Elementor Pro). Without Pro, paste it at the top of each page.

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>Fitness studio header</title>
  <style>
    body{margin:0;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#ffffff;background:#111315}
    .site{background:#111315;border-bottom:1px solid #24282d}
    .bar{max-width:1160px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{margin:0;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#ffffff}
    .brand span{color:#c8f135}
    .menu{display:flex;align-items:center;gap:30px}
    .menu a{color:#e8ebef;text-decoration:none;font-size:15px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
    .button{display:inline-block;padding:12px 22px;border-radius:4px;background:#c8f135;color:#111315;text-decoration:none;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
    @media(max-width:780px){.bar{flex-wrap:wrap;padding:14px 16px;gap:12px}.brand{font-size:22px}.menu{order:3;width:100%;gap:20px;justify-content:space-between}.menu a{font-size:13px}.button{padding:10px 16px;font-size:13px}}
  </style>
</head>
<body>
  <header class="site">
    <div class="bar">
      <p class="brand">Northline<span> Studio</span></p>
      <nav class="menu" aria-label="Main">
        <a href="#classes">Classes</a>
        <a href="#timetable">Timetable</a>
        <a href="#membership">Membership</a>
      </nav>
      <a class="button" href="#free-trial">Free trial</a>
    </div>
  </header>
</body>
</html>