Creating an Overlay Header Effect in Breakdance
This article guides you through creating a beautiful overlay header effect in Breakdance, where the header starts as transparent and becomes solid with a white background upon scrolling. This effect also includes a dynamic size change, making the header shrink as you scroll down the page. No coding is required; it’s all achievable with a few clicks using Breakdance’s Header Builder.
Setting Up the Header
Start with a default Header Builder element in Breakdance, which typically has no special settings applied. This initial header will not have the overlay effect, stickiness, or color changes upon scrolling.
Enabling Overlay Effect
To create the transparent overlay effect:
- Go to the Header Builder settings in Breakdance’s Properties panel.
- Navigate to Design > Overlay and enable the ‘Overlay’ option. This makes the header transparent initially.
Making the Header Sticky
To make the header stick to the top of the page upon scrolling:
- In the Header Builder settings, find the ‘Sticky’ section in the Design tab.
- Enable the ‘Sticky Header’ setting. This ensures that the header remains at the top of the viewport as you scroll down the page.
Customizing Header Appearance on Scroll
Adjusting the header’s appearance as you scroll adds a dynamic visual effect to your website.
Changing Background Color on Scroll
To change the header background color upon scrolling:
- Under Design > Sticky > Style, set a white background. This change will only apply when the header becomes sticky.
- With this setting, the header will transition from a transparent to a white background as you scroll down the page.
Adjusting Header Size on Scroll
To dynamically change the header size:
- Set the initial header size to a specific height, like 150px, in the Header Builder size settings.
- Under ‘Sticky’, in the ‘Style’ section, set the ‘Min Height’ to a smaller value, such as 80px. This reduction will occur when the header becomes sticky.
Testing and Saving the Header
After configuring these settings:
- Save the header in Breakdance.
- Refresh the front end of your site to see the overlay header in action. Initially, the header will be transparent and large, then become solid white and shrink as you scroll.
Final Thoughts
This overlay header effect enhances the visual appeal of your website, adding a professional and dynamic touch. With Breakdance’s Header Builder, achieving this sophisticated look is straightforward and requires no additional coding expertise.
