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
Written by Justin on November 14, 2022 in
Updated: November 14, 2022 | 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;
Join Our Newsletter!
If you enjoyed this article, subscribe to our free monthly newsletter providing you tips & tricks on how to grow your digital business using powerful online tools & AI.
Written by Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses increase their revenue using the internet. He writes about the latest software and tools that can help companies 10x their daily workflow & revenue


Notify of

Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022