A Sticky Header is when your Header is fixed to the top of the screen as you scroll. This help guide will walk you through the process of how to implement this on your Rocketspark website.
- Head to your Dashboard and make sure you are on the Dynamic Header Template, as this feature is only available on this template
- Once you have changed your template, go back to the Dashboard and click Change Design.
- The following menu will appear, go to Header & menu.
- The Header & menu layout is as follows. Click on the three dots next to Header layout.
- More Header layout settings appear. Go to Sticky header.
- Tick the Sticky Header box. This will mean your Header is fixed to the top of your page as you scroll. The Sticky Header background colour can be changed by clicking on Sticky header background. Please note: The sticky header background colour will only appear if you have chosen Overlay next stack (transparent). Refer to step 3 above to find this under Header layout.
- To save your work, click Back.
- Click Close.
- Click Save Changes.
- You now have a Sticky Header! Scroll down your page and you will see how your menu is fixed to the top of your screen.
- When using the Sticky Header with the Header Overlay, you have the ability to choose what the sticky coloured background will be. The colour picker only shows when the Overlay next stack (transparent) option is selected. This is in place for the best practice, it will prevent website content from being obscured by the Sticky Header. Therefore, you will need to choose an opaque colour for the Sticky Header when used with the transparent Header Overlay. Refer to step 5 to see how to change the colour.
- Sticky Header will be site-wide.
- If you have a contact bar on your website, the contact bar will not be sticky.
- If you have had custom development work done on your site, you will need to get in touch with our Customer Success team to remove the code and access this new feature.