Configure the header of your Cloudbeds Website

Gabriela Garcia

September 07, 2026 21:08

Purpose	Choose and configure how the header of your Cloudbeds Website behaves as visitors move through the page.
Best for	Manager/GM and Admin users who manage the layout and navigation of a Cloudbeds Website.
Use this when	You want to make the site header static, sticky, shrinking, overlapping, or hidden.
Requirements	A Cloudbeds Website that you can edit in the Cloudbeds Websites Editor.
Expected result	Your website header uses the behavior and design settings you selected.

Introduction

The header is the top section of a webpage and usually appears across the site. It can contain important information such as your logo and contact details, as well as navigation elements that help visitors understand where they are and move to other parts of the website.

In the Cloudbeds Websites Editor, you can configure how the header behaves as visitors scroll or interact with the page. Start by choosing the header type that matches the behavior you want, then apply its settings in the Design Panel.

Choose a header type
Access the header design settings
Configure a static header
Configure a sticky header
Configure a shrinking header
Configure an overlapping header
Configure a hidden header

Choose a header type

Header types control what visitors see at the top of the page and how the header behaves while they scroll. Use the descriptions below to choose the behavior you want before changing the header settings.

Header type	What it does
Static	Appears at the top of the page and moves out of view as visitors scroll.
Sticky	Remains fixed at the top of the page while visitors scroll.
Shrinking	Remains fixed while visitors scroll and changes to a more compact header.
Overlapping	Overlaps the first section of the page for a more integrated visual design.
Hidden	Is hidden by default and appears only when triggered by a supported user action. The hamburger menu button is available only on tablet and mobile device layouts.

Access the header design settings

Header behavior is configured from the Design Panel after you select the header in the Cloudbeds Websites Editor.

Open your Cloudbeds Website in the Cloudbeds Websites Editor.
Select the Header.
Use the Design Panel to open the settings available for the header.

After selecting the Header, use the Design Panel to access the available header settings. In this example, the Header Overlap controls are visible.

Configure a static header

A static header appears at the top of the page but does not remain visible as the visitor scrolls. Use this configuration when you do not want the header to overlap the first section or stay fixed while scrolling.

Select the Header.
In the Design Panel, expand Position.
Make sure Overlap with top section on page is turned off.
Make sure Set as sticky header is turned off.

A sticky header remains fixed at the top of the page while the visitor scrolls.

Select the Header.
In the Design Panel, expand Position.
Enable Set as sticky header.

Configure a shrinking header

A shrinking header, also known as a dynamic sticky header, remains fixed at the top of the page while the visitor scrolls and changes to a more compact design. Configure both its starting appearance and how it changes on scroll.

Select the Header.
In the Design Panel, expand Position.
Enable Set as sticky header.
Enable Change header on scroll.
In the header design settings, expand Spacing and set the initial padding-top and padding-bottom values.
Return to Position and configure the scroll behavior:
- Background on scroll: Select the background color and opacity.
- Spacing on scroll: Set the padding-top and padding-bottom values to be smaller than the header's initial spacing.
- Logo size: Use the slider or text box to define the size the logo shrinks to when the header changes on scroll. The default is 66%.

The Scroll Behavior settings include the controls used for a shrinking header, including sticky behavior, changes on scroll, spacing, and logo size.

Configure an overlapping header

An overlapping header visually merges with the first section of the page by placing the header over that section.

Select the Header.
In the Design Panel, expand Position.
Enable Overlap with top section on page.
Select the header overlap background color and opacity.

Configure a hidden header

A hidden header is not visible by default and appears only when triggered by a user action, such as selecting a hamburger menu button. Choose the header preset from the Design Panel.

Select the Header.
In the Design Panel, expand Presets.
Choose the preset layout that fits your design.

The hamburger menu button is available only on tablet and mobile device layouts.

Now that you can choose and configure the header behavior for your Cloudbeds Website, use these resources for broader Editor 2.0 navigation, global site styling, and website management orientation: