Design a Sticky Header With Smooth Transitions in Breakdance
With a little bit of custom code, you can create a beautiful sticky header that follows your users down as they scroll through your website
Justin Gluska
Updated November 13, 2022
sticky menu hero header in breakdance builder
Reading Time: 1 minute
Smooth design almost always looks great on websites. With some simple CSS tricks, you can animate a custom header in Breakdance to shrink and follow you down your pages – giving your visitors access to your Hero/Menu for the duration of their site visit
Simply add a Header Builder to your page in Breakdance and turn on sticky settings! Once this is on, you can add the following CSS snippets to the advanced settings of your Header Builder to have a sticky, animated menu that follows you as you scroll down your page!
%%SELECTOR%%.bde-header-builder--sticky-styles { transform: translateY(80px); border-radius: 100px; transition: 0.5s; transform: scale(0.95); opacity: 90%; margin-top: 40px; } %%SELECTOR%%.bde-header-builder--sticky-scroll-slide { transition: 0.5s; }
Want to Learn Even More?
If you enjoyed this article, subscribe to our free newsletter where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.