If your header sits on top of your banner image (an overlay or transparent header) and you'd like it to have a solid background colour instead, you can change this in a few clicks. This guide shows you how to switch your header layout from overlap to a colour background, and how to pick the colour you want.
How to change a transparent header to a solid background
The header layout setting is in Change Design, under Header and menu. Changing it updates the header across your whole website, not just one page.
Step 1: Open Header and menu
Click Change Design, then click Header and menu.
Step 2: Change the header layout
Under Header layout, click the dropdown and change it from Overlap to Colour background.
Your header will now have a solid colour behind it, instead of sitting over the top of your banner image.
How to choose your header background colour
Once your header is set to Colour background, you can pick the colour it uses.
- In Header and menu, click the three dots next to Header layout.
- Choose the colour you'd like for your header background.
Check how it looks on mobile
Headers can look a little different on smaller screens. Once you're happy with the colour, preview your site on mobile to make sure your logo and menu are easy to read against the new background.
Tips and things to watch out for
- The header layout applies to your whole website. You can't have an overlay header on one page and a solid header on another.
- Pick a colour that contrasts with your logo and menu text so they stay easy to read.
- Always check your site on mobile after making header changes.
Frequently asked questions
Can I make my header solid on just one page? No. The header layout is a site-wide setting, so changing it updates the header on every page.
How do I make my header transparent again? Go to Change Design > Header and menu, and change the Header layout dropdown back to Overlap.
Where do I change the header colour? Click the three dots next to Header layout in Change Design > Header and menu. This option shows once your header is set to Colour background.
Is this available on my plan? Yes. You can change your header layout on all Rocketspark plans.
My logo is hard to see on the new header colour. What should I do? Try a different header background colour that contrasts more with your logo, then check it on both desktop and mobile.
Need more help?
If you're still stuck, flick us a message at support@rocketspark.com. We're happy to help.