Introduction

The header is a very important part of any website, especially because it contains the navigation linking to all other pages on your site (and potentially external sites as well). The style of the header can be edited via the CMS by following the steps in this article.
 

Summary

• Where to Edit the Header
• Style
• Other Style Settings
• Text Style
• Header Content
• Hiding the Header 

 

Where to Edit the Header

There is only one location where you can actually edit the website header. Navigate to the CMS > Page Editor > Home Page > Selected Header > Edit:

*IMPORTANT: The header can only be edited on the Home page, not on any other pages.

 

Style

To edit the style, click on the "Change Style" button after having selected the header:

 

Header Styles

You will then choose from the seven header styles that are available

 

Style 1

 

Style 2

 

Style 3

 

Style 4

 

Style 5

This style is basically the same as Style 1 but the only difference is that there is an email and a phone icon in the top-right corner. You will be able to choose the agent whose information should be associated with these icons so you will want to make sure that all agent profiles are set up under the CMS Settings.

When hovering over the icons, the email address or phone number will be displayed.

 

Style 6

 

Style 7

This style is unique because the logos are centered with the navigation split on both sides. Any navigation links that cannot fit on the left side of the logo will be available on the right side if there is space. If there is no space, it will collapse them on the drop-down menu.

When viewed on a mobile device, the logo will be centered as long as it is only one logo:

However, if you upload two logos on the header, they will be aligned to the left:

 

Other Style Settings

Header Background

Choose the color and transparency level with this setting here:

 

Secondary Menu Background

This secondary menu background color can be adjusted here:

This "secondary menu" is referring to the menu that appears when opening a folder on the menu like so (green):

 

Text Style

Menu Text Weight, Font Size, Text Color

Adjust these settings here: 

 

Secondary Menu and Hover Text Color

Adjust with these settings here: 

These settings apply to the secondary menu as you can see in this screenshot here:

 

Overlap Style & Sticky Navigation

You can choose whether to use an "overlap style" or not for the header. This style will be overlapped with the block just under the header (typically the Hero Block), so adjusting the opacity of the header background color might contribute to a better visual experience overall. Note that the adjustments set for opacity only work when the site visitor is at the top of the page. When scrolling down the opacity will be at 100%.

"Sticky Navigation" refers to whether you would like to have the navigation menu (header) scroll down with the site visitor or if you would like to have it stay at the top. If you would like to have the menu scroll down with the site visitor, turn this setting ON. 

 

Header Content

To adjust the header content, click on the Content tab at the top of the header settings:

On this page, you can configure the following:

• Logo1
• Logo2
• Alt Text
• Logo Size
• Logo Link
  • • This setting is available if you would like to redirect your site visitors to somewhere other than the home page when they click on the logo. The default is set to be the home page (displayed as "/") so no configuration is required if that is acceptable. In order for it to redirect a site visit to an external site, be sure "http://" or "https://" is included. For an internal site, just grab the first part after the .com. For example, for the About page on your website, you would add "/about" in the "Logo Link" field.
• Agent Info (if using Header Style 5)

Note: The file size limit is 50 MB, 100 px is also a good size, we also support squares, but the system will compress or crop if the aspect ratio is too large, the most suitable ratio is 3:2. 

Hiding the Header

*IMPORTANT: In many situations, removing or hiding the Header is not advisable as it contains your branding information (logo, etc.) that an MLS will require to be present when displaying listings on your website. You will want to make sure that there are no issues with MLS compliance before hiding the website header.

If you do want to remove or hide the header, exit the header configuration and then click on Pages in the top-left of the Page Editor: 

You will then select the "cog wheel" edit icon next to the page where you want to adjust this setting. This is edited at a page-by-page level so if you hide on one page it will not be hidden on the others unless configured one by one to do so.

You will then be able to edit the setting for "Page Style" where you can choose whether the header and footer display or maybe just one or the other.

Here is an example of what the "Simple Header" looks like. It only shows the logo, agent image, agent contact information, and license ID.

 

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> or by phone at 1 (855) 981-7557.