Layout: Header

The website header is a fixed element at the top of every page on your site. Any changes made to the header will be reflected across all pages.

The header includes various components such as the Logo, Website Title, and Navigation Menu. You have the flexibility to display all or some of these elements and can adjust their settings via the Site Editor > Website Header.

Header components

Logo

You can control logo settings from Website Header > Header Settings while in Site Editor Mode.

  1. Enable 'Show Logo' option to show the logo controls.
  2. Click 'Browse / Upload' button to choose an image of your logo or upload one.
  3. Use Max Size slider to control the logo size, please note that Max Size option is Responsive, that means, you can set a Max Size for the logo in desktop screen and another max logo size for mobile screen.
  4. Clicking your logo image always leads to your homepage.


For your logo, the best format is SVG. It's a vector file, which means it will stay sharp and clear at any size. Plus, it can have a transparent background, making it versatile for various uses.

The width and height attributes of the SVG tag of the logo file must be set to 100%.


To make your SVG logo interact with both dark and light background, in your SVG file, set the fill and stroke attributes to currentColor.

Website name

You can control Navigation menu appearance settings from Website Header > Header Settings while in Site Editor Mode.

  1. Enable 'Show Website Name' option to show the website name besides the logo.
  2. Use Website name size slider to control the website name font size, please note that website name size option is Responsive, that means, you can set a font size for the website name for the desktop screen and another size for the mobile screen.
  3. Use Website name font buttons to set the font for the website name.
  4. Clicking website name always leads to your homepage.


Navigation Menu

You can control Navigation Menu settings from Website Header > Navigation menu while in Site Editor Mode.

  1. Use 'Menu Alignment' option to align menu links in some header styles.
  2. Use 'Menu Links' section to manage navigation menu links, for more information, please check this page.


Social Links 

Social Links are just Buttons Block placed in the header. Each button features an icon for a social network like Facebook and doesn't have a label. The button links to the website's social profile.

You can control Social Links settings from Website Header > Social links while in Site Editor Mode.

For consistency, it's recommended to clone an existing social button when adding a new one then change its icon and link to match the social network profile.

Call-to-action Button

A Call to Action button is a key feature in your website's header. It directs visitors to your website main goal, whether that's getting in touch, making a booking, or purchasing a product.

You can control CTA button appearance and link from Website Header > Call-to-action button while in Site Editor Mode.