Styling the Main Header

Note: If you are using the ‘Header & Footer Builder’, please refer to this link. But if you are using the old header and footer system, you can consider the below instructions.

You can style your site’s main header by going to Customize > Header > Main header (Style tab).


The styling options are divided into three areas:

  1. Colors
  2. Paddings
  3. Borders

The available options are always context-aware. They will vary depending on the header layout you have chosen (e.g. if you have chosen a single row header layout, you won’t have the options related to the bottom row available).

  1. Colors file-9xvbwcukfm-8538964
  2. Paddings file-1j89cc7iua-3476817For instance, you get these padding options if you have chosen a two-row header layout from Customize > Header > Main header > Layout. The first option will set the padding for the main header row, and the second option will set the padding for the bottom row.
  3. Border file-p4mx4omgib-9509903You can use the border options to separate the header from the rest of the page or the header rows from each other. The border width option lets you choose between a contained and full-width border — the latter spans across the entire screen.