On Rocketspark, you can overlay your Header on the first stack of your page, allowing you to apply a transparent or gradient colour background to your menu area and revealing the photographic, illustrative or video background in the stack your menu overlays. This help guide will walk you through the process of how to implement this on your website.
- Head to your Dashboard and click Change Design.
- The following menu will appear. Head to Header & menu.
- The Header and menu design settings will appear. Under Header layout, you will see the drop-down menu for the Header Overlay option.
- Display background colour is the default option, and Overlay next stack (transparent) is how you can achieve the new overlay of the Header option.
- Here you can see the difference between the two options (with a 50% gradient selected):
- Once you have Overlay next stack (transparent) selected, click on the three little dots next to Header layout.
- This will take you to the Header layout settings. Here, you can edit the gradient colour, height and opacity, as well as edit your Menu text and Contact bar.
- You have full control over the background colour of your header, the gradient height and opacity. Gradient height and opacity can be edited by simply clicking the - and +, or by clicking on the number to reveal a drop-down menu to select your desired amount.
- Once you have achieved your desired Header Overlay effect, click Back.
- You will be redirected to the Header & menu settings, click Close.
- To save your work, click Save changes.