Configuring Sticky Header Options in Breakdance
This article provides a comprehensive guide on using sticky header options in Breakdance. These options allow for various sticky header effects, enhancing the website’s navigation and aesthetic appeal.
Enabling Sticky Header
Basic Setup
- Add a Header Builder element to your design from the Add panel.
- To make the header sticky, simply enable the ‘Sticky Header’ option under Design > Sticky in the Properties panel. This makes the header stick to the top of the screen when scrolling.
Customizing Scroll Behavior
Configuring Visibility on Scroll
- Under ‘Scroll Behavior’ in the sticky options, use the ‘Hide After’ option. Specify a distance (e.g., 400px). The header will hide after scrolling past this point and reappear when scrolling back up below this distance.
- ‘Hide Until Scroll’ can be used for headers with different content than the main header. Duplicate the header and customize the sticky one separately. Set ‘Hide Until Scroll’ with a specified scroll distance for this header.
Setting Reveal Animation
- Under Design > Sticky > Scroll Behavior in the Properties panel, choose a reveal animation for when the header becomes visible. Options include sliding or fading in and out.
- Adjust the animation duration as needed.
- Enable ‘Reveal on Scroll Up’ to make the header appear whenever users scroll up, regardless of their position on the page.
Styling the Sticky Header
Differentiating from Main Header
Under ‘Style’, you can adjust the sticky header’s background color or other styling elements to differ from the main header. For example, you can set a solid background color for the sticky header if the main header is transparent.
Adjusting Size and Border
- Set the ‘Min Height’ for the sticky header under ‘Style’ to change its size after scrolling. For instance, reduce the header height from 200px to a more reasonable 80px on scroll.
- Customize borders and shadows specifically for the sticky state. For example, hide a top border on the sticky header.
Responsive Behavior
Disabling Sticky Header on Specific Devices
At Design > Sticky in the Properties panel, use the ‘Disable At’ option to disable the sticky behavior at a specific breakpoint.
Testing on Different Devices
After configuring the settings, preview the header on various device breakpoints (desktop, tablet landscape, tablet portrait) to ensure the sticky behavior and appearance are as expected.
Additional Notes
Breakdance’s sticky header options provide extensive customization for creating dynamic and user-friendly website headers. Experiment with different settings to find the perfect balance for your site’s design and functionality.
