Dental clinic header
Clinic header with a phone and hours strip, a text wordmark, three navigation links and a Book appointment button.
When to use it
The header every page of the clinic site shares. It has two rows because a dental practice has two kinds of visitors at the top of the page: people who will call and people who will book online. The thin strip carries the phone number and opening hours, so a patient standing in the parking lot finds them without opening a menu. The main row keeps the wordmark on the left and three links plus a booking button on the right, which is as many items as fit on one line on a tablet. Replace the clinic name and the phone number first, and make the number a tel: link so it dials from a phone. If you open late on certain evenings, write that into the strip rather than burying it on a contact page; it is the detail working patients look for most often.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- The Book appointment link has a background color and short text, so it arrives as a real Button widget; the three plain navigation links arrive as Text Editor widgets, not 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 strip and the main row stack and the links wrap under the wordmark; there is no hamburger menu, so keep the link labels short.
- Point the three links at your real pages after import; the converter keeps the href values from the HTML, which are placeholders here.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dental clinic header</title>
<style>
body{margin:0;font-family:'Inter',Arial,sans-serif;color:#263538;background:#ffffff}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.strip{background:#0e4f55;color:#ffffff}
.strip-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px}
.strip p{margin:0;font-size:14px;line-height:1.5;color:#ffffff}
.strip a{color:#ffffff;font-weight:700;text-decoration:none}
.bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid #d6efe8}
.brand{font-family:'Manrope',Arial,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.02em;color:#0e4f55;text-decoration:none}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:#263538;text-decoration:none;font-size:15px;font-weight:600}
.nav .button{display:inline-block;padding:12px 20px;border-radius:10px;background:#0e4f55;color:#ffffff;font-weight:700}
@media(max-width:780px){.strip-in{flex-direction:column;align-items:flex-start;gap:2px}.strip p{font-size:13px}.bar{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 24px}.nav{flex-wrap:wrap;gap:12px 20px}.brand{font-size:21px}}
</style>
</head>
<body>
<header>
<div class="strip">
<div class="wrap strip-in">
<p>New patients welcome · Mon–Fri 8:00–18:00 · Sat 9:00–13:00</p>
<p>Call <a href="tel:+15550142283">(555) 014-2283</a></p>
</div>
</div>
<div class="wrap bar">
<a class="brand" href="#home">Linden Row Dental</a>
<div class="nav">
<a href="#treatments">Treatments</a>
<a href="#team">Our team</a>
<a href="#patients">Patients</a>
<a class="button" href="#book">Book appointment</a>
</div>
</div>
</header>
</body>
</html>