Law firm header
Two-row header: a phone and address strip, the firm name with a subtitle, three navigation links and a free consultation button.
When to use it
The header a prospective client sees on every page of a small law firm site, so it carries the two things they look for first: a phone number and a way to book a consultation. The navy strip at the top puts the number and office address where a visitor on a phone can find them, because many people with a legal problem would rather call than fill in a form. Below it, the firm name and the “Attorneys at Law” line work as a text logo until you have a real one, and the navigation keeps to three links plus a gold consultation button; the fewer choices there are, the more often that button gets used. Replace the firm name, phone number and address first, then point the links at your real pages. If the firm has more than one office, show the main number here and list the other locations on the consultation 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 × 7
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 7
- Button × 1
Things worth knowing
- The consultation link becomes a real Button widget because it has a background color. The three navigation links arrive as Text Editor widgets with ordinary links; for a collapsing mobile menu, replace them with a Nav Menu widget (Elementor Pro) after import.
- The firm name is a paragraph, not a heading, so each page keeps its own H1. It converts to a Text Editor widget; swap it for a Site Logo or Image widget once you have a logo file.
- Below 780px the firm name and navigation stack, the links and the button wrap underneath, and the phone and address strip splits into two lines.
- Using it as the site-wide header needs Elementor Pro’s Theme Builder. Without Pro, paste it at the top of each page or keep your theme’s header.
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>Law firm header</title>
<style>
body{margin:0;font-family:'Source Sans 3',Arial,sans-serif;color:#566273;background:#f8f4ec}
.topline{background:#1d2b3e;color:#ddd5c4}
.topline .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
.topline p{margin:0;font-size:14px;line-height:1.5;color:#ddd5c4}
.site-header{background:#ffffff;border-bottom:1px solid #ddd5c4}
.wrap{max-width:1140px;margin:0 auto;padding-left:24px;padding-right:24px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px}
.brand{margin:0;font-family:'Libre Baskerville',Georgia,serif;font-size:22px;font-weight:700;color:#1d2b3e;line-height:1.2}
.brand-sub{margin:4px 0 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8c6d3a;font-weight:600}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:#1d2b3e;text-decoration:none;font-size:16px;font-weight:600}
.nav a.button{display:inline-block;padding:12px 20px;background:#8c6d3a;color:#ffffff;border-radius:4px;font-weight:700}
@media(max-width:780px){.bar{flex-direction:column;align-items:flex-start;gap:14px}.nav{flex-wrap:wrap;gap:14px 20px}.topline .wrap{flex-direction:column;gap:2px}}
</style>
</head>
<body>
<div class="topline">
<div class="wrap">
<p>Call (614) 555-0142 · Mon–Fri 8:30 am–5:30 pm</p>
<p>418 Larkspur Row, Suite 300, Columbus, OH</p>
</div>
</div>
<header class="site-header">
<div class="wrap bar">
<div>
<p class="brand">Wrenfield & Osei</p>
<p class="brand-sub">Attorneys at Law</p>
</div>
<nav class="nav">
<a href="/practice-areas/">Practice areas</a>
<a href="/attorneys/">Attorneys</a>
<a href="/insights/">Insights</a>
<a class="button" href="/consultation/">Free consultation</a>
</nav>
</div>
</header>
</body>
</html>