Skip to main content
Space: Header
Thomas K avatar
Written by Thomas K
Updated over a week ago

Summary


Space features a minimal header that comes packed with lots of options to tweak the design to fit your needs.

Tips


  • When setting the colors for your header you'll see "Overlay" colors. These are the colors used when content is placed behind the header. You can see this in action when using a banner as your first section with "Enable header overlap" checked.

  • Use a high quality logo that fits well. It's often best to crop the white space in the logo file before uploading as the theme will automatically include white space around the logo.

How to show banner content under header


Banners sections have the ability to be placed behind the header bar. This can create a unique look for your website where the hero banner blends into the header.

Update your banner sections

  1. Open the theme editor

  2. Select the template you want to edit

  3. Add or move a Banner section to the top

    • Header overlaps can only work when the banner is placed as the first section in your template

  4. Click into the Banner section then check "Enable header overlap"

  5. Click save

Update colors to work with your overlay

Now that you have a banner overlay you can adjust the colors to swap our the background color as customers scroll.

  1. Open the theme editor

  2. Click into the Header section

  3. Look for the following settings

    1. Default color scheme: This color scheme is shown when there is no banner content under the header.

    2. Overlay color scheme: This color scheme is used when banner content is below the header. It's best to set this to either Transparent or Inverted transparent

    3. Default border: This border is used when there is no banner content under the header.

    4. Overlay border: This border is used when there is banner content below the header.

  4. Edit this to work with your banner overlay

  5. Click save

How to change the colors in the header as you scroll


Space comes with a unique setting to force your header to use a color difference filter. This will basically force the content in your header to use a contrasting color against the content that is behind the header.


In this example below you can see the logo is changing colors as users scroll further down and the logo is overlapping a darker color.

  1. Open the theme editor

  2. Open theme settings by clicking the cog near the top left

  3. Find and select the Header settings

  4. Find and check "Enable color blend"

  5. Click save

When using this setting it's best to set both the Default color scheme and Overlay color scheme in your header to Transparent or Inverted transparent.

How to add featured images to the dropdown menu


Additional content can be displayed in the dropdown menu on desktop. This currently only works when the header is set to "Left" for Desktop layout.

  1. Open the theme editor

  2. Under the Header section click "Add block"

  3. Click into the newly created block.

  4. For the Menu field enter the title of the dropdown menu you’d like this block to be displayed within. This field must be entered in lowercase to work.

    • E.g. if you want this block to be displayed under the Shop menu then you should enter "shop" here

  5. Update the URL, Headings and Image as needed.

  6. Click Save.

Did this answer your question?