A header is the top section of a website that contains important elements such as the logo, navigation, or contact links. It helps visitors find their way around easily while giving the site a professional and well-structured appearance.
How to find the Header element
To add a header, first create a new section and open the "Header" tab. You’ll find a variety of templates there, simply choose the one that best fits your website.
Edit header
When editing the header, you can replace, rename, or expand existing elements. You can also add extra actions, columns, or other elements to customize the header exactly to your needs.
Option 1: Customize logo
You can easily replace your logo by either changing the existing text or uploading your own logo.
You can adjust the logo size and alignment as desired using the slider.
Option 2: Edit title and set desired action
You can easily edit the page title and rename it as desired. To do this, click on the corresponding menu item.
Delete existing page titles or add new ones to organize your pages. You can also customize the size, gap, alignment, text color, and other formatting options.
Set different actions for the page so that the desired functions are executed when clicked. Available options include:
Mega Menu
Link to
Scroll to
Open modal
Mail to
Call to
Download file
📌 Note: The mega menu is only available with the Standard plan or higher.
The "Scroll to" function only works on a single page, for example on one-pagers. Alternatively, you can use anchor links to jump to specific sections.
Option 3: Add elements
Add new elements such as contact information, social media links, and more.
Each element will then be placed in its own column, and you can configure the column width and the positioning of the elements by dragging the columns into the desired arrangement.
The menu settings
You can then make additional appearance settings, including borders, spacing, colors, width, and the option to fix the menu in place.
Adjusting the mobile view
To control the mobile layout, use the header settings located above the dropdown in the top-right corner. Select "Mobile style".
These settings are available in the mobile menu view:
Option 1: Show or hide elements
Specifically enable or disable a logo or the close button for the mobile view.
Option 2: Appearance of the burger button
Choose from various styles and customize the color and size of the icon individually.
Option 3: Four layout variants
Choose one of four menu layouts and set the width as well as the inner and outer spacing.
Option 4: Background transparency and color
Set the background color and desired transparency level (available in all layouts except “Full”).
Alternatively, set the background color directly through the color settings.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂