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
Open the theme editor
Select the template you want to edit
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
Click into the Banner section then check "Enable header overlap"
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.
Open the theme editor
Click into the Header section
Look for the following settings
Default color scheme: This color scheme is shown when there is no banner content under the header.
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
Default border: This border is used when there is no banner content under the header.
Overlay border: This border is used when there is banner content below the header.
Edit this to work with your banner overlay
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.
Open the theme editor
Open theme settings by clicking the cog near the top left
Find and select the Header settings
Find and check "Enable color blend"
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.
Open the theme editor
Under the Header section click "Add block"
Click into the newly created block.
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
Update the URL, Headings and Image as needed.
Click Save.