Configure Header Settings
Overview
Your website's header is the first thing visitors see. RealHomes gives you extensive control over its look and feel.
To start customizing, navigate to the following path based on your version:
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤
Explore Site Identity and Headers section to explore further settings.
1. Site Identity (Logo & Title)
First, let's establish your brand. Navigate to:
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤
You can upload your site's logo, retina logo, title, description tag and site icon from this section.
Here you can upload: * Logo: Your main brand image. * Retina Logo: A high-resolution version (2x size) for sharp display on modern screens. * Site Title & Tagline: Text that appears if no logo is uploaded (and used for SEO). * Site Icon (Favicon): The small icon seen in browser tabs.
2. Header Customization
Most header options are located under:
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Basics
Located in Headers → Basic. Here you can control the fundamental layout and behavior of your header.
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Contact Information
Want to show your phone number or email right at the top? Go to Headers → Contact to add your details.
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Search Form
You can choose to Show or Hide the advanced search form in the header. Go to Headers → Search Form.
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Sticky Header
A sticky header stays visible at the top of the screen as users scroll down. Toggle this feature in Headers → Basic.
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Using Elementor?
If you built a custom header with Elementor, check out our guide on Making Elementor Headers Sticky.
3. Header Styles (Colors & Layout)
Want to change the background color, font size, or height? Navigate based on your version:
RealHomes Settings
➤ ➤ ➤ ➤
Legacy Settings
➤ ➤ ➤ ➤
Sticky Header Styles
You can have a different look when the header is "stuck" (e.g., a white background instead of transparent). Scroll down in the Styles section to find Sticky Header settings.
RealHomes Settings
➤ ➤ ➤
Legacy Settings
➤ ➤ ➤
Responsive Header Styles
Adjust how the header looks on mobile devices and tablets. Scroll down further in Styles to find Responsive Header settings.
4. Advanced & Custom Headers
Elementor Custom Header
Want complete freedom? You can design a custom header from scratch using Elementor (Free version supported!). 👉 Learn how to create a Custom Header
Responsive Variations (Modern Design)
If you are using the Modern design, you can switch between Transparent and Solid layouts for mobile devices. Check Header → Basic to find the Responsive Header Variation setting.