The Header & Navigation page offers a lot of functionality. This is where you will set the appearance of your navigation, set all of your banner book buttons, and set up a callout banner if you need one on your site.

Header

Custom Header Layout

This Custom Site Header is an updated option to our current Header option. It is designed to give you more flexibility and control over the appearance of your website’s header. This feature allows you to customize the layout, appearance, and behavior of your site’s header, giving your users a better and more streamlined experience.

What’s Different

1. Sticky Header Option

   • The sticky header ensures the header remains visible when users scroll up (back to the top of the website), improving navigation and keeping important information accessible.

2. Full-Width Header

   • You can now choose to have a full-width header, which expands to fit the entire screen size, creating a more immersive experience for your users.

3. Increased Accessibility -Designed to be more accessible for all users by default.

4. Elimination of the ‘More’ Menu

   • Simplified navigation with no more “More” menu, but this requires careful content management.

How to Enable CSH Feature (Super Admin only)

• Go to the Appearance tab and select Header and Navigation.
• In the first tab, Header, you’ll find a checkbox labeled Custom Header Layout with the description: “Enable flexible layout options to customize your header on desktop screens.”
• Check the box to enable the new Custom Header Layout. Once selected, the header will adopt the new design and functionality.
• Example: If the website previously had a “Fixed” or “Sticky” header enabled, the styling will automatically update to reflect the new layout.

Important Considerations

• Search and Google Translate Compatibility: Please note that the new header layout currently does not support search functionality or Google Translate.

Testing and Feedback

If you enable the Custom Header Layout option, we recommend testing the following:

• Responsiveness: Ensure the header looks good on both desktop and mobile devices.

• Navigation and Menu: Test the navigation menu options and ensure all buttons and links work correctly.

• Callout Banner: If you use a callout banner, ensure it displays correctly and responds well to scrolling.

More to Come

• Hamburger Menu for Desktop: A desktop-friendly menu option is on the way.
• Additional Layout Options: More control over logo and navigation placement and spacing.

Feedback & Support

We’re here to help! If you have any questions or encounter any issues while using the Custom Site Header, don’t hesitate to reach out to our FH.me team. We value your feedback as we continue to enhance this feature.

Additional Resources

Slides

Recording

Header Background Color

Header Background Color is the color of the header banner.

Transparent Banner on Desktop

This option will set the header banner background transparent so it sits on top of images, videos and content. This option only applies to the desktop menu so the menu background and font color will still need to be selected for mobile.

Header Background Opacity allows for a semi-transparent header banner background.

100% is completely solid and 0% is completely transparent.

20% is the minimum opacity but higher than 50% is recommended.

Layout Options

Enable fixed menu on this site – This will create a “sticky nav” which will always remain at the top of the browser.

Force Full Width menu – Can only be used with the horizontal menu. This moves the menu area out from in between the Banner Button and Logo and places it on a lower, wider area. Allows more menu tabs to display on desktop before autogenerating the “More” dropdown tab for items without enough room to display horizontally.

Center the Logo – Can only be used with the hamburger menu. This will center the logo in the middle of the header banner.

Logo Height

This section will define the height of the logo in the header banner. There are two options, Default and Tall.

Disable Search Functionality

Search functionality is turned on by default and displays in the banner. To turn search functionality off, check this box.

Navigation

Navigation Type

Style Options

• Hamburger menu, which is a vertical menu, where users will first have to click on the Menu icon to then see the dropdown of pages.
• Horizontal Menu, which is the typical navigation menu displayed across the top of each page. Horizontal Menus are always better for more complex sites with longer dropdowns.

Navigation Text Color

Navigation Text Color is your text color of the menu.

Menu Font Options

Make the menu font bold. – This will bold the font on the menu

Make the menu font uppercase. – This will uppercase the menu font

Use navigation font color for hamburger menu button – Currently the hamburger menu icon color comes from the Banner Button Color, choosing this option, the hamburger menu icon color will be the Menu Font Color.

Submenu Text Color

Allows you to select the color of the text on the menu items

Submenu Background Color

Submenu Background Color is the background color that will display just on the menu item dropdowns

Buttons Tab

Under the Buttons tab is where you’ll set all of your Banner Book buttons’ appearances and actions.

Hide “Book Now” button

Hide “Book Now” button – This will hide the banner book button across all pages on the site.

---

The next three sections will define the banner book buttons that appears on generic pages, activity pages and alternative buttons that can be swapped in on individual pages.

For information on the options related to buttons on FareHarbor sites, reference this help page.

Default

This button is the banner book button that is displayed at the top of all Pages

Activity Pages

This button is the banner book button displayed at the top of all Activity pages

Alternative Banner Buttons

These are any additional buttons that will be used to override the buttons set under Default or Activity Pages.

Any time an alternative button is set under Banner & Menu, in order for it to actually appear anywhere on the site, set the Custom Banner Button for each page where that button should appear. To do that, go to Page Options → Custom Banner Button, and select the alternative button from the dropdown.

Callout Banner

The callout banner is used to highlight short announcements, sales, or specialty activities. This is a small, short banner that appears at the very top of each page of the site, and links out to another page or lightframe.

Callout Banners can be set on both a site and page basis. To set a callout banner site wide, select it as the Primary or Alternate Global Callout Banner within Theme Components. To set a callout banner on a specific page, set Primary or Alternate Custom Callout Banner within Page Options. If a page is nested as a child, it will inherit the Callout Banner that is actively being displayed on an ancestor.

The Primary Callout Banner should be set to the banner that will be displayed the majority of the time. The Global Callout Banner should be set to any promotional / seasonal banner. If both a Primary and Alternate Callout Banner exist, we will attempt to display the alternate first.

Don’t display the callout banner on activity pages.

This will hide the callout banner on activity pages.

Use the headline font on this callout banner as opposed to the body font.

This will set the callout banner font to the headline font.

Make the callout banner fixed to the top of the page.

This will make the callout banner fixed/sticky at the top for BOTH mobile and desktop. Always double check on mobile to make sure the callout banner looks appealing.

Callout Banner Date Range

Callout Banner Date Range will allow for pre-setting the callout banner to show and hide at specific times based on which date ranges are selected (date ranges are defined in company settings). This function is very useful for promoting time-bound sales, promo codes, or specialty activities. If the callout banner content should always show, leave this field blank.

Callout Banner Contents

The contents and functionality of the callout banner is similar to how buttons function on the rest of the site.

For more information on button functionality, reference this help page.

The Label field on the callout banner is the actual text content. This field is limited to just 50 characters. If the banner needs more content, then use a row on the homepage for this content instead, or highlighting it somewhere else on the site.