Spark Header - Introduction to basics

Learn the basics of the Spark Headers for Desktop and Mobile.

To get started, go into your admin dashboard, navigate to General Content > Menus > Headers.

Once you clicked on Headers, click on the + sign to Add a New Header


You have the option to build Custom Headers from scratch if you are confident enough, but there is always an alternative to build one out of the templates we have.

downloads.intercomcdn.comio368738601359e70db4e52ad528bb0cd50Screen+Shot+2021-07-28+at+9.48.58+AM downloads.intercomcdn.comio368738683108643d266046288fb45afe5Screen+Shot+2021-07-28+at+9.50.04+AM

In case you go for the template option (which is recommended), a new window will come up where you can choose the header style, then you will need to name your Header, and lastly Add the Header on the bottom of your screen.

downloads.intercomcdn.comio368738870c0e8f52061ef354546e2dd17Screen+Shot+2021-07-28+at+9.52.59+AM downloads.intercomcdn.comio3687392761da654ad19ebfae3ad795247Screen+Shot+2021-07-28+at+9.53.36+AM

or you can edit the existing footers which can be done by clicking on the Edit button. (By default your site will have a Header)


Once you are in the Menu Editor, you will notice 4 tabs on the left side which are:

  • Desktop Menu

  • Settings

  • Mobile Menu

  • Target


Now let's break down each tab, and how to use them. We will cover Targeting in a separate article.

This tab is where you essentially customize the most of the options that are available.

To see the options/features available for customization, click through all of these tabs to collapse them:


Menu Tab Features:

  • Container/No Container

  • Text Logo/ Image Logo

  • Logo Height

  • Menu Selection


Collapsing the "Select a Menu" tab will allow you to select which menu to include in the header.

downloads - 2023-11-30T211255.664

There are further Options below this tab which covers mostly the color customization of the Side Menu like:

For context the side menu is this:


Options Tab

Options tab allows you to choose between two Header styles:

  • Standard

  • Absolute


Key difference: Absolute style has a transparent look.

Sticky Header


You can enable/disable Sticky header, and change it's values.

Sticky Header enabled:


Sticky Header disabled:


They key difference is that, when you have a sticky header enabled, it will stay pinned to the screen until the point of offset that is set. In this case after i scroll down 800px, the header will slowly disappear.

Colors Tab

The Colors Tab allows you to customize all of the colors in your header such as:

  • Background Color

  • Link Color

  • Link Hover Color

  • Text Color


Top Bar

This tab allows you to customize the Top Bar of your header, where you can include:

  • Social buttons

  • Text

  • Menu

  • And enable/disable Top Bar Container (scroll down for more on this)

Note: This can be applied to both left, and right side columns


Collapsing each of the collumns will allow you to include these:

downloads - 2023-11-30T211417.995 downloads - 2023-11-30T211425.059

Enabling/Disabling the Top Bar Container

Top Bar Container: NO

downloads - 2023-11-30T211436.419

Top Bar Container: YES

downloads.intercomcdn.comio368801824c8474d0e3ed0101fe4903497Screen+Shot+2021-07-28+at+11.41.15+AM downloads - 2023-11-30T212447.931

Mobile Menu

This is the place where you customize your Menu for Mobile. To preview the menu, click on the little hamburger menu on the right side.

downloads - 2023-11-30T212456.325

You can select which menu to include for the mobile version:

downloads - 2023-11-30T212502.816

And you can select it's Color Scheme:

downloads - 2023-11-30T212508.499

Note: Primary color will pull the color from the site's primary color you choose beforehand.

Once you are happy with the changes you made to your header, click on the check mark button to save all your changes, and lastly the X button to exit the Header Editor.

downloads - 2023-11-30T212516.246

Further Education about the Spark Header & Footer Editor: