The header is a key part of your website, containing the logo and navigation. Learn how to manage header types, layouts, and styles to create a seamless experience across all devices.
Header Overview
The header is the section of your website that holds the logo and navigation. It plays a significant role in shaping the look and feel of your site. At SmartHOTEL, we’ve already optimized the default header settings to ensure the best display for hotel websites. However, using the SmartHotel Editor, you have the flexibility to further customize your header to better suit your brand’s unique style.
You can log in to customize your website at https://editor.smarthotel.nl.
There are multiple ways to control the style and functionality of your header to ensure it is both visually appealing and functional for your visitors.
Watch the video for more information:
Header Types
There are two main types of headers: Shrinking and Sticky.
- Shrinking Headers are available on desktop and tablet (only in the top bar header layout). They keep the header visible but reduce its size as users scroll, ensuring the navigation is always accessible without taking up too much space.
- Sticky Headers are available on all devices and ensure the header stays fixed at the top of the page as users scroll, providing constant access to navigation.
Mobile headers are always sticky by default.
Shrinking Headers
A Shrinking Header is a compact version of your site’s header. This feature allows you to keep essential navigation elements fixed while taking up less space as users scroll. It’s particularly helpful for sites with large headers or those designed for long scrolling pages. Shrinking headers are available on desktop and, for tablets, only in the top bar layout.
Header Layouts
To change the layout of your header:
- Hover over the header and click Header.
- In the Design tab, select a new header layout.
Pre-designed layouts save time and give you a professional look instantly. After selecting a layout, you can still modify it as needed. However, if you are switching to a sticky header, ensure the Shrinking Header toggle is disabled in the Shrinking Header tab.
Note:
Choosing a new layout will remove any existing content from your header, so it’s recommended to create a backup before making changes. Flexible headers can’t be switched back to fixed headers after this change.
Sticky Headers
To make your header sticky:
- Hover over the header and click Header.
- In the Content tab, select Set As Sticky Header.
This will make the header stay in place as visitors scroll down the page. If this option is not available, you may need to disable the Shrinking Header toggle.
Hide Headers
You can also hide the header on specific devices:
- Hover at the bottom of the header and click Header.
- Select Hide page header on, then choose the device on which you want to hide the header.
To unhide the header, go to the side panel, click the Unhide Elements icon under Settings, and select the Hide icon on the footer. Choose Yes to unhide the header.
Header Logo
If your header contains a logo image, the logo will automatically be retained when switching between header layouts. However, if there are multiple images or a text-based logo, the primary logo will remain in place as set in the layout.
Note: The logo in your header does not automatically sync between device views. For instance, a logo added on desktop will not appear on mobile unless manually added. An exception to this is when using the top bar header layout on tablet, which will inherit logo changes from desktop.
If the logo is accidentally deleted, you can easily re-add it by dragging the image element back into the header and linking it to your homepage.