Header element 2.0
Jacob avatar
Written by Jacob
Updated over a week ago

How to find the Header element

To find the Header, you need to look for a specific section category. That's where you can find different variations of it.

This article is about an updated Header element. If you are using the version from before 04.08.2023, please feel free to ask us in a live chat for further assistance.

How to add and position elements in Header

Adjusting the header works similarly but slightly different from how it normally does in Onepage. The basics are adding elements and adjusting columns.

You can add new elements by clicking on the menu located in the top-right corner of a section, as shown in this image:

Then each element is placed in its own column, and you can configure the column width and element positioning by dragging the columns to your desired layout arrangement.

You can achieve micro-adjustments by selecting an element's position inside the column. For instance, you can make an element stick to the left corner while still leaving plenty of space on the right side.

Using Menu element

The main element inside your Header is the "Menu," and you can use it in various ways. Let's review some of its core settings and capabilities:

Horizontal and Vertical Menus: You can create both horizontal and vertical menu items, allowing you to tailor the navigation style to your website's design.

Vertical menus can only be created when there's enough space to place them vertically. For example, inside the Mega Menu dropdown or within a normal section.

Hover Animations: Choose from eight different hover animations to add a touch of interactivity and elegance to your menu items.

Adjustable Distance: Easily modify the distance between menu items to ensure a clean and visually appealing layout.

Page Assignment: The improved interface allows you to assign menu points to specific pages effortlessly.

Multi-Language Support: You can create a language switcher using the "Menu" element. It's not a complete multi-language functionality, but still a great fit for a smaller website.

Collapse State Customization: When there's not enough width to display all menu items, you can apply a custom icon and dropdown style for elements that are cut off, making the user experience smoother.

Adjusting mobile view

To control the mobile layout, you use the Header settings, which are usually located slightly above the dropdown in the top-right corner.

Here's what is possible to adjust in the mobile view of your menu:

- Switching elements on/off: You can now activate/deactivate a logo, button, or a close button specifically in the mobile view.

- "Burger" button appearance: Select different styles like "Frame," change the icon type colour and size.

- 4 different layouts: Choose from 4 different layouts of menu appearance. Control its width and the amount of space both inside and outside.

- Background transparency: Select colour and level of background transparency.


💡Do you have any feedback concerning 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! 🙂

Did this answer your question?