Note: Lofty is rolling out in stages. Depending on the version your account is on, some features or screens described in this article may look different or may not yet be available to you.
Introduction
Your website header appears at the top of every page and contains your logo, navigation links, and optional contact information. Lofty offers 7 header styles to match different branding approaches — from minimal single-logo headers to split navigation designs.
⚠️ The header can only be edited from the Home Page. Changes apply site-wide, but the editor is only accessible when viewing the Home Page in the CMS.
Before You Begin
- Make sure your website template is set before customizing the header — some template changes can reset header settings.
- If you plan to hide the header on any page, read the MLS Compliance Warning in this article first.
How to Open the Header Editor
- Open the Website CMS (from Lofty top nav: Content > Websites, then click your site).
- Navigate to the Home Page in the Pages panel.
- In the page editor, click on the header at the top of the page to select it.
- Click the Edit icon that appears in the top-right of the header.
Important: The header can only be edited while viewing the Home Page. If you are on a different page, navigate to the Home Page first.
Choosing a Header Style
- In the header settings panel, click Change Style.
- Choose from the 7 available header styles:
| Style | Layout description |
|---|---|
| Style 1 | Logo left, navigation right |
| Style 2 | Logo left, navigation right (alternate layout) |
| Style 3 | Logo left, navigation right (alternate spacing) |
| Style 4 | Full-width with secondary styling |
| Style 5 | Includes Agent Info — shows agent photo, name, and contact details in header |
| Style 6 | Compact header variation |
| Style 7 | Logo centered, navigation split on both sides. Links that don't fit on the left appear on the right; overflow links collapse into a dropdown. On mobile, one logo is centered; two logos align left. |
- After selecting a style, the header preview updates. Continue to the settings below.
Style Settings
Header Background
Set the header's background color and transparency level. Adjusting transparency works with the Overlap Style setting (see below).
Secondary Menu Background
Sets the background color of the dropdown that appears when a visitor hovers over a folder in your navigation.
Text Style Settings
Menu Text
Adjust the font weight, font size, and text color for the main navigation links.
Secondary Menu and Hover Text Color
Set the text color for dropdown menu items and the color that appears when visitors hover over navigation links.
Overlap Style and Sticky Navigation
Overlap Style
When enabled, the header overlays the block directly beneath it (typically the Hero Block) instead of sitting above it. This creates a transparent header effect at the top of the page. The transparency level is controlled by the Header Background opacity setting.
Note: The transparency effect only applies when the visitor is at the top of the page. As they scroll down, the header background becomes fully opaque.
Sticky Navigation
When ON, the header scrolls down with the visitor as they scroll the page — it stays visible at all times. When OFF, the header stays at the top and disappears as the visitor scrolls down.
Header Content (Logo and Agent Info)
Click the Content tab at the top of the header settings panel to manage your logo and agent information.
Logo Settings
| Setting | Description |
|---|---|
| Logo 1 | Your primary logo — appears in the header on all pages |
| Logo 2 | Optional second logo (for co-branding or brokerage logo) |
| Alt Text | Descriptive text for accessibility and SEO |
| Logo Size | Adjusts the display size of the logo in the header |
| Logo Link | Where clicking the logo takes the visitor. Default is / (home page). For internal pages, use the relative path (e.g., /about). For external sites, include the full URL starting with https://
|
Logo file requirements: - File size: maximum 50 MB - Recommended height: 100 px - Recommended format: PNG (supports transparency) - Recommended ratio: 3:2 (width to height) — logos that are twice as wide as they are tall work best - Maximum logos: 2
Agent Info (Style 5 only)
If using Style 5, configure the agent information displayed in the header — name, photo, phone, and contact details are pulled from the agent profile.
Hiding the Header on a Page
You can hide the header on specific pages without removing it from the rest of your site. This is a per-page setting.
⚠️ MLS Compliance Warning: Hiding your header may violate your MLS requirements. Many MLS boards require your logo and branding to be visible on pages that display listings. Confirm with your MLS before hiding the header on any listing page.
To hide the header on a specific page:
- In the page editor, click Pages in the top-left.
- Click the ⚙️ (cog wheel/settings) icon next to the page where you want to hide the header.
- Find the Page Style setting.
- Toggle the header display off. You can also choose to show only the header, only the footer, or neither.
- Save the settings.
Simple Header: Some page types show a "Simple Header" when the full header is hidden — this displays only the logo, agent image, agent contact info, and license ID.
After making any header changes, click Publish in the top-right corner to go live.
Tips
- Use Overlap Style on visual hero pages. When your Home page starts with a full-screen hero image, enabling Overlap Style and setting the header background to semi-transparent creates a polished, modern look.
- Turn on Sticky Navigation. Most visitors expect the navigation to follow them as they scroll — sticky nav reduces the frustration of having to scroll back to the top to navigate.
- Keep your logo sharp on mobile. Test your logo on a phone after uploading — if it looks blurry, try uploading a higher-resolution version within the 50MB limit.
- Style 7 works best with fewer nav items. Because navigation splits on both sides of the centered logo, it works best when you have a balanced number of links.
Troubleshooting
I can't find the header editor. The header can only be edited from the Home Page. Navigate to the Home Page in the Pages panel and select the header block at the top of the page.
My logo looks blurry or pixelated. Upload a higher-resolution PNG file. For best results, use a logo that is at least 300px wide at the 3:2 ratio, scaled to display at 100px height.
The header background isn't transparent even with opacity set. Transparency only works in Overlap Style mode. Enable Overlap Style in the header settings, then adjust the opacity in the Header Background section.
My logo link isn't working. For internal pages, use only the path after your domain (e.g., /listings). For external URLs, make sure the link starts with https://.
Frequently Asked Questions
Can I have a different header on different pages? The header style and settings apply site-wide. You can hide the header on specific pages (see Hiding the Header above), but you cannot have a completely different header design per page.
Can I add a phone number or CTA button to the header?
Do header changes apply to Agent Subdomains?
Questions?
If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.
Comments
0 comments
Please sign in to leave a comment.