All Collections
Website editor
Site style
Customize your site header (menu)
Customize your site header (menu)
N
Written by Naoko Shimogaki
Updated this week

Why site header is important

The website header is located at the top of the page and contains important elements such as the website logo, navigation menu, and social media icons. It is usually the first thing that visitors see when they land on a webpage and provides them with a sense of familiarity and navigation.

Navigation

The website header is crucial for navigation and ease of use for visitors. By having a consistent header on each page, visitors can easily navigate to different sections of the website without getting lost. The navigation menu lets visitors quickly find what they are looking for, whether it be FAQs, services, or information. This saves visitors time and effort and ultimately improves their experience on your website.

Components of the site menu

Durable websites' header menu consists of main 4 areas.

  1. Social media icons

  2. Website title & logo

  3. Menu

  4. Buttons

How to edit the header menu

Social media icons


Please see this help centre document: Add social media icons on your site

Site name

  1. Go to Website > Edit.

  2. Click the "Edit header" button in the header section.

  3. Change the website title, and click "Edit" to change the logo.

  4. Click "Save" in the top bar.

Logo

  1. Go to Website > Edit.

  2. Click the "Edit header" button in the header section.

  3. Click "Edit" in the Logo section

If you want to use your own image as your logo:

  1. Click the "Image" tab.

  2. Choose the source. You can choose "Branding" if you already have uploaded the logo through the Branding section. Or, you can upload your logo image here by choosing "Upload file."

  3. Click "Save" in the top bar.

If you want to manage branding for your website, please see this help document: Add a logo to your site.

If you want to use Text + Icon

  1. Click the "Text + Icon" tab.

  2. Enable Text and/or image toggles as needed.

  3. Choose the font from the dropdown menu, or click regenerate to let AI pick the font.

  4. Click "Replace" on the image to choose the image yourself, or click "Regenerate" to let AI pick the image.

  5. Click "Save" in the top bar when you are happy with the logo.

Buttons

Please see this help centre document: Add buttons to your site.

Menu style

To customize the menu positioning, sticky header, and navigation style.

  1. Go to Website > Edit.

  2. Click the "Edit header" button in the header section.

  3. Click "Style."

    a. Color: See this page to change the site color.
    b. Button: See this page to change the button style.
    c. Positioning: This will change the position of the elements within the header.
    d. Menu (only shows up when you have multiple pages): changes the menu alignment.
    e. Navigation style: this will change the highlight style of the page when site visitors click each menu.


    e. Full width: shows the menu full width when seen on desktop
    f. Sticky: keep the header at the top on scroll.
    g. Spacing: this controls the space between the top and bottom.

  4. Click "Save" in the top bar.

The website header is a vital element for any website. Not only does it help visitors navigate and find what they are looking for, but it also aids in branding, recognition, and SEO. For these reasons, it is essential to dedicate time and effort to creating a well-designed and functional website header for your website.

Did this answer your question?