The header is a very important part of any website, especially because it contains the navigation to all other pages. The style of the header can be edited via the CMS Tool by following the steps in this article.
*The header can only be edited on the Home page of the CMS Tool.
There are five different header styles:
Edit the Website Header
Click the "Edit" button when hovering on the header block, or double click the header when hovering to edit.
To change the style, click on the button to "Change Style." You can also adjust the "Header Background" color and transparency in this section.
This header is unique for the home page as it has a gradient opacity layer that overlaps slightly with the first block (typically the Hero Block). On other pages, it will display the color as you set in the header background color.
This style will also be overlapped with the block just under the header like on Style 3 when displaying on the Home page. Adding some opacity to the header color might be a good idea for a better visual experience.
This style is pretty much like Style 3 but the only difference is that there is an email and a phone icon on the top-right corner. You will be able to choose the agent whose information should apply to these icons so you will want to make sure that part is complete in the CMS Tool. When hovering over the icons, the email address or phone number will pop up and display.
You can also customize the "Text Style" including menu text weight, menu font size, and menu text color:
After clicking on the "Content" tab, you will be able to upload your logo, define "alt text," and even choose a destination URL in the "Logo Link" field.
For those that would like to redirect site visitor to another site when they click on the logo, the default is set to the home page (displayed as "/") so no configuration is required if that is acceptable. In order for it to redirect the visitor to an external site, make sure "http://" or "https://" is included. For an internal site, just grab the first part after the .com or .me. For example, the for the About page you would add "/about" in the "Logo Link" field.
Removing or Hiding Header
For some pages, you might want to keep the header from appearing in order to keep site visitors focused on the content of the page and avoid giving them access to additional content right away.
In order to do so, you will want to access the page editor and then select "Pages" in the top-left:
You will then select the "cog wheel" edit icon next to the page where you want to adjust this setting.
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, and agent contact information and license ID.
If you have any questions regarding this topic or any others, please reach out to our Support Team via email at <firstname.lastname@example.org> or by phone at 1 (855) 981-7557.