Header is found at the top of each page and serves a few very important purposes. It provides a consistent way to navigate through your site. However, it is also part of a consistent user experience that all good sites share. The design of a header varies from site to site, but the core features like how a site is navigated and experienced remains the same.

Your site's header is a crucial part of your visitor’s experience. A functional, consistent header can make a world of difference in your site’s usability.

📌 It's important to note that you can have one Header per site.

This means that every page will have the same navigation elements/buttons.
​

You can however, hide the header on pages of choice. After you've enabled the Header, you can start editing it.

1. Logo

Add your Logo in Text or Upload a picture.

2. Navigation (Navigation Elements)

Navigation will automatically be adjusted to a mobile menu on mobile screens.
​

3. Primary button

Primary button serves as an elements meant for primary actions and in some ways completes the user's task.

📌 as you can see, the Primary button is device responsive and can be adjusted according to device view.

4. Secondary Button

A secondary button could be handy if your site/business has a “secondary” call to action.

📌 as you can see, the Secondary button is device responsive and can be adjusted according to device view.

5. Topbar

Topbar is a separate block on top of the Navigation bar and it can be adjusted to Sticky on scroll.

📌 Sticky on scroll basically means that it sticks to the top of the screen while you scroll.

6. Layout & Behaviour

Layout and Behaviour determine the position of elements in the Header. It also determines the layout on Mobile device to make the perfect adjustments and site experience.

Now, if you move over to the Styling Tab, you will see the toggle for Transparent Header.

If you don’t like the looks of a solid bar as header, you can make it transparent. This way it falls over the content you’ve placed below. This effect can look really nice with big images for example.

📌If the transparent header is sticky non scroll, it WILL get a color as background when you scroll down

Check it out on this example 🚀