All Collections
Getting Started with EngagementHQ
Before you launch
Set up branding and navigation in your Header and Footer
Set up branding and navigation in your Header and Footer

Modify the default header and footer menus on your site.

Gayathri Rajendiran avatar
Written by Gayathri Rajendiran
Updated over a week ago

A well-designed Header and Footer can make your site accessible and functional. You can use them for internal navigation, and to links to important pages such as policies, social media, and corporate websites.

In EngagementHQ, you can also customize your Header and Footer to align with your branding. The Header and Footer are sections within your Home Page Editor that you cannot delete, and each has three tabs: Content, Color, and Links. To edit them:

  1. Go to Appearance editor > Home Page Editor > Sections.

  2. Select Header or Footer to edit them.

  3. Once editing the section, switch between the Content, Color, and Links tab to make changes.

  4. Remember to Save as draft when you’re finished.

  5. Publish your homepage to make your changes live.

The Content Tab

The Content tab is where you can edit built-in fields for branding and navigation.

In your Header, you can upload a logo by selecting Upload Image. The ideal dimensions for a logo are 150px x 50px, and you can upload these file types: .jpg, .jpeg, .png, and .gif. Adding a logo will create a link back to your homepage.

You can also edit the text and URL for the Sign-in and Register links in your Header.

In your Footer, you can add social media links that will appear as icons for each platform. There are fields for the following platforms:

  • Facebook URL

  • Twitter URL

  • Google URL

  • Instagram URL

  • LinkedIn URL

  • YouTube URL

The Color Tab

The Color tab allows you to select the text and background colors for your Header and Footer. You can do this by selecting the color swatch and choosing from there or entering a color code in the available field.

Many organizations have specific colors that align to their brand. If you must adhere to a color, we recommend finding the correct color code to enter. In EngagementHQ, you can use Hex, RGB, or HSL to enter the code; use the up and down arrows next to color code field to switch between them.

The Links tab

The Links tab is where you control your main navigation. When defining your navigation, there are several types of links you can add:

  • Project: link directly to a project page. You can select the correct one from the Project dropdown menu

  • All Projects: link to a page listing all projects. This page is available to all EngagementHQ sites.

  • Static Page: link directly to an existing static page by choosing it from the Select Static Page dropdown menu.

  • External Link: link to a webpage outside of your EngagementHQ site, such as a corporate website. Use the URL field to paste your link.

  • Home Page: create a link to your Home Page. This link will appear by default.

  • Hub: link directly to a Hub. You can choose the correct one from the Select Hub dropdown menu.

  • Parent: create a new menu item to nest child pages. Creating parent links gives you multiple levels in your navigation.

To edit your navigation, you need to access the Links tab; this is possible from either the Header or Footer section.

  1. Once you have navigated to the Links tab, you’ll notice there is a section each for the:

    • Header: create, edit, delete, or rearrange navigation links that appear in your Header.

    • Breadcrumbs: define the parent-child hierarchy between your project pages. This will affect the content path shown at the top of project pages. Drag projects to the right of the interface to nest them below the project above. Only Published projects will appear here.

    • Footer: create, edit, delete, or rearrange navigation links which appear in your Footer.

  2. Go to the section you want to change, and select the pen icon to edit a link, the bin icon to delete it, or select Add Link to create a new link in your navigation.

  3. Add a Custom Title to change the link text.

  4. Use the Link Type dropdown menu to select what kind of link you’re creating.

  5. Select from the page dropdown menu, or paste a URL into the available field.

  6. Select a parent page from the Nest under parent link dropdown menu, if you want to create a child page. The link below will link to the Public space review project, and will sit under Planning projects in your navigation menu.

  7. Save when you’re finished.

Once you have created your navigation, and made any other changes to your, you can Preview and Publish your homepage.

What else?

Did this answer your question?