Conference one-page header

When to use it

The bar above the one-page conference site, built around the two things every visitor checks first: what the event is and when it happens. The name and the date-and-city line share the left side, so the date is never more than a glance away, even on a phone where the row stacks. The four links jump to sections of the same page rather than to other pages, so they work like a table of contents: who is speaking, when, where and how much. Get tickets is the only filled element in the bar and also points at the tickets section. Replace the name and date first, then check that each link matches a CSS ID on the page. If you later add separate pages, such as a code of conduct, change the links to /#speakers and so on so they still work from there. When the event sells out, relabel the button Join the waitlist rather than removing it.

What it converts to

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

• Container × 5
• HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
• Text Editor × 6
• Button × 1

Things worth knowing

• The event name, the date line and the four section links arrive as Text Editor widgets with their #top, #speakers, #schedule, #venue and #tickets links kept exactly as written; Get tickets, with its magenta background, becomes a Button widget linking to #tickets.
• The links only scroll if the page has elements with those CSS IDs. The converted page carries prefixed IDs such as hte-1a2b3c4d-speakers, so rename them to speakers, schedule, venue and tickets after importing the page, as described in the page notes.
• Use it as an Elementor Theme Builder header (Elementor Pro); without Pro, paste it at the top of the page. To keep it on screen while visitors scroll, set Motion Effects → Sticky to Top on its outer container, which is also a Pro feature.
• Below 780px the row stacks: name and date centered, the four links wrapping beneath them, then the button. There is no hamburger menu, so keep the labels short.

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>Conference header</title>
  <style>
    body{margin:0;font-family:'Work Sans',Helvetica,Arial,sans-serif;color:#ffffff;background:#101a4d}
    .bar{background:#101a4d;border-bottom:4px solid #ffc83d}
    .inner{max-width:1160px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:baseline;gap:14px}
    .logo{margin:0;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#ffffff}
    .logo a{color:#ffffff;text-decoration:none}
    .when{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffc83d}
    .nav{display:flex;align-items:center;gap:26px}
    .link{color:#ffffff;text-decoration:none;font-size:15px;font-weight:600}
    .tickets{display:inline-block;padding:11px 20px;border-radius:6px;background:#d61f63;color:#ffffff;text-decoration:none;font-size:15px;font-weight:700}
    @media(max-width:780px){.inner{flex-direction:column;align-items:center;padding:12px 16px;gap:10px}.brand{flex-direction:column;align-items:center;gap:2px}.logo{font-size:21px}.nav{gap:14px 18px;flex-wrap:wrap;justify-content:center}.link{font-size:14px}.tickets{padding:9px 16px;font-size:14px}}
  </style>
</head>
<body>
  <header class="bar">
    <div class="inner">
      <div class="brand">
        <p class="logo"><a href="#top">Halden Product Summit</a></p>
        <p class="when">May 14–15 · Port Halden</p>
      </div>
      <nav class="nav" aria-label="On this page">
        <a class="link" href="#speakers">Speakers</a>
        <a class="link" href="#schedule">Schedule</a>
        <a class="link" href="#venue">Venue</a>
        <a class="link" href="#tickets">Tickets</a>
        <a class="tickets" href="#tickets">Get tickets</a>
      </nav>
    </div>
  </header>
</body>
</html>