In this guide, you will learn how to change the appearance and background of your page headers. The header can be set individually for each page on your website (except for the navigation bar – this is the same across the entire website).
WARNING: Header settings cannot be adjusted in the mobile version of the editor. To edit the header, you will need to log in via a computer.
You can open the settings by clicking the gear icon in the top right corner of the header. Here, you can adjust several settings to change the design of the page header.
Header Type
Here you can change the type of header. Available options include Navline only, Navline & heading, or Navline & content. The available settings differ depending on the header type.
NOTE: The header type cannot be changed for blog articles, as these use a different type of page.
Navline only
This setting displays only the bar with the logo and menu, followed by the rest of the website. You can change the background and adjust the properties of the navigation bar. Navigation bar settings affect the bar across all pages of the website. In basic settings, you can change the navigation bar background.
Navline & heading
This header type is generally used on most template home pages. You can add up to three headings (Heading, Subheading, and Title above heading) as well as a button.
Navline & content
This header type allows you to insert any Webnode content, such as forms or image galleries. The background for the navigation bar and content can be set separately. Backgrounds can be customized for both the navigation bar and the header section.
Navline background and Section background
You can change the navigation bar background by clicking Navline background.
You can select one of the recommended backgrounds or click the plus button to choose another or upload your own.
Here you can choose a background from the gallery or upload your own.
Similarly, Section background settings (header section) can be applied only when the header type Navline & content or Navline & content is selected.
The recommended resolution for a header image is 1920×1280 px, with a file size around 600 KB. Larger images may cause slower page loading and more data transfer.
The process for changing it is the same as for the navigation bar (see above).
If you set a non-solid background for the navigation bar and/or section, you can also set background effects, such as filter, image position, color overlay, or animation.
Advanced Settings
Content Alignment (only for Navigation Bar and Headings type)
Here you set how the content within the page header will be aligned.
Content Width
The content width for the Navigation bar and headings type mainly defines where the content starts. For example, with left-aligned content, you can set exactly where the headings begin.
Minimum Height
This setting determines the size of the header. It is useful if you want to control how much of the background image is visible.
Decorative Frame (only for Navigation bar and headings type)
This feature adds a dark frame around the Heading, Subheading, and Title above the heading.
Navline settings
WARNING: For the Navline only type, access this menu via Advanced settings.
Menu Type
Here you can change the position or style of menu items. Classic, Centered, and Bottom differ by position. Boxed hamburger and Hamburger are hamburger menus and differ by icon.
Menu style
The menu style defines how the page names appear in the menu. Items can be bordered, have strikethrough, be spaced differently, or have hover effects. This cannot be applied to Dropdown or Dropdown with tile menu types.
Navline height
Here you set the height of the navigation bar.
Content width
This setting adjusts the distance between the logo and menu items in the navigation bar.
Site search
More information can be found in our articles How to add a search field and How to Add a Product Search Field.
Sticky (fixed) Menu
When enabled, the navigation bar remains at the top even when scrolling down the page.
Delimiter
This option adds a line separating the navigation bar from the rest of the page.
Additional panel settings
To configure the Additional panel settings see our guides How to add contacts to the page header, How to add a language switcher to the page header, How to add social media to the page header, and How to add a currency switcher to the page header (if your project has an active e-shop).
