Learn how to customize the header and footer in Booking Website Pro, including navigation, branding, and site-wide layout elements.

Header

The header is the part of your site that contains the logo and navigation. There are a lot of different ways to control the style of your header to help you create an appealing header for your site.

The default header offers pre-made layouts, minimizing the risk of accidental changes. Users can choose layouts with limited actions, ensuring a focused and efficient design experience. An advanced editing option is also available for users seeking more customization, such as adding extra widgets or elements, adding empty or predesigned sections, and saving header sections for reuse. For more information, see Advanced Header Editing.

Hide or Unhide Header

You can hide the header for all pages or only for specific pages.

To hide the header:

Right-click the header to open the context menu.
Select Hide on this device, then select either From this Page Only or From All Pages.

To unhide the header:

In the side panel, click Layers
Locate your header in the panel
Click the crossed-out eye icon next to it

Widgets Compatible with Shrinking Headers

Not all widgets are compatible and appear in the shrinking header. If you have a widget in the header that is incompatible with the shrinking header, a blank column appears in its place. You cannot edit widgets when the header is shrunk.

The following widgets are compatible and will display in a shrinking header:

Navigation
Multi-language
Social Icons
Click to Call button
OpenTable button
Click to Email button
vcita
PayPal button
Facebook Like button
Images and Logos
Paragraph widget
Title widget
Buttons

Sticky Headers

A sticky header becomes static and stays in place when you scroll through the pages on your site.

Mobile headers are always sticky by default.

To enable a sticky header:

Hover over the header, click Header, and then click Edit Design.
On the Content tab, select Set As Sticky Header.
If the Sticky Header option is not available, you need to disable the Shrinking Header toggle on the Shrinking Header tab.

Header Layouts

There are several pre-designed flexible header layouts to select from. If you switch to one of the pre-designed flexible header layouts, you cannot switch back to a fixed header; you can only switch between other flexible header layouts. Switching layouts also removes existing content from the header section. We recommend creating a backup before switching layouts.

To change the header layout:

Hover over the header and click Header.
On the Design tab, select a new header layout. If you are switching to a sticky header, you first need to disable the toggle for Shrinking Header on the Shrinking Header tab.

Header Design

To access the header design menu, hover over the header, click Header, then click the Design tab.

Layout: Explore layout options that pair top navigation and hamburger styles consistently across screen sizes. While default layouts have limited capabilities, an advanced editing option enhances flexibility.
Spacing: Set margins and padding, with changes on the desktop affecting other screen sizes if their spacing remains unaltered.
Background: Choose background color or image, add borders or shadows, and witness changes seamlessly reflected across all screen sizes.
Position: Enable a sticky header with scroll-based changes. Sticky header activation on any screen size influences the behavior of others.

Header Logo

If the header contains one image, the logo of the site will be kept when moving between header layouts. In the case there is more than one image, or the logo is textual, the logo image is kept as in the layout. It is important to note that the headers between devices are not connected, so if you add a logo on a desktop, it is not automatically added to the other device types. The only exception is if the top bar header layout is used on a tablet, it will inherit any logo changes made on the desktop.

If you delete the logo, re-add the image by dragging the image element back into the header, and set the link to go back to the homepage.

Header and Expandable Menu

You can add an expandable menu on your desktop and tablet sites, making it easy to create modern sites that have great design flexibility. Choose from several expandable menu layouts, and customize them as you like, adding widgets, rows, and columns.

The expandable menu layout for mobile offers more customization and a way to display widgets in the header, and a menu that is always visible.

You can change the layout of the header to a predefined layout that includes buttons, click to call, social icons, and more. You can add any widget to the expandable menu from the widgets panel.

Desktop and Tablet Header and Expandable Menu

To select and configure a header and expandable menu layout for desktop and tablet:

In the side panel, click Layers.
Click Site Layout.
In the Desktop section, select the Expandable menu layout.
In the Tablet section, select the Expandable menu layout.
After selecting the expandable menu layout, a hamburger icon displays in your site header. Click the hamburger () icon to see the expandable menu.
On the Layout tab, click the existing layout to select a menu layout.
On the Style tab, you have the following options:
- Enter from. Select Top or Side.
- Entrance effect. Select Cover or Push.
- Width. Move the slider to set the width of the expandable menu when expanded. The width of the menu is defined in percentages to fit all screen sizes.
- Background. Configure the background color or image.
- Close icon color. Select a color for the close icon and the close icon background color.
On the Spacing tab, change the padding.

The expandable menu can have up to 3 rows, and each one is fully customized. If the Desktop and Tablet have the same site layout (both expandable or both top bar), all customizations are the same for both. In case they are different, each device needs to be defined separately.

To edit the location of the expandable menu in the header:

Hover over the header, click Header, and then select Edit Design.
In the Layout section, click Left or Right.

Mobile Header and Expandable Menu

To select and configure a header and expandable menu layout for mobile:

Hover over the header, click the Header label, and then select Edit Design.
On the Layout tab, click the existing layout to select a menu layout. The mobile header offers layouts that display widgets such as social links, phone numbers, and more. The header layouts are fixed, so you cannot add new widgets, but you can edit or remove them.
Click Left or Right for the Menu icon position.
If you are not already, open the menu in mobile view. This allows the menu editor to open so you can edit the expandable menu.
On the Layout tab, click the existing layout to select a menu layout. The expandable menu offers multiple layouts that can display the social links, contact information, and more. You can add any widget to the expandable menu, add columns, sort the columns to be next to each other, or on top of each other. However, when you switch from one layout to another, it deletes all content that you added to the menu, taking only the widgets in the chosen layout.
On the Style tab, you have the following options:
- Enter from. Select Top or Side. When Top is selected, move the height slider. When Side is selected, move the width slider.
- Entrance effect. Select Cover or Push.
Additional widgets cannot be added to the mobile header.

Display Header Items Above Hero Image

To display header items above hero images, hover over the header, click Header, click the Design tab, then click Overlap first row. This gives your hero images more visibility and makes it easier to design great-looking, trendy sites.

Keep the following in mind:

For the header. Set the background color to transparent or a color with opacity.
For the first row. Use top padding that is equal to or similar to the height of the header.

For added flexibility, this setting applies only to the current page. To enable it on other pages, navigate to each page and follow the steps above.

Footer

The footer is the last section of your site, located at the bottom, and is the same on each page of your site. Footers are a convenient way to make sure your site visitors have access to important links like terms of service, privacy policy, or social media, regardless of the page they are visiting. In addition to legal links, the footer is a good place for copyright information and general contact information.

Customize Footer

While the footer is its own section, the contents can be edited just like pages. By default, there will be at least one row. If there is only one row, the row will not have the option to be deleted.

To customize the footer section design:

Hover over the top of the footer, and click Footer.
On the Style tab, adjust the footer background by selecting a color or an image. You can also select a border style and thickness.
To adjust the padding or margin, click the Spacing tab.

Hide and Unhide Footer

To hide the footer on a specific page:

Navigate to the desired page.
Hover over the top of the footer, and click Footer.
Click the Hide footer on this page toggle.

To unhide the footer:

In the side panel, click the Unhide Elements () icon under Settings.
Click the Hide icon on the footer, and select Yes to unhide the footer.