Design a Sticky Header With Smooth Transitions in Breakdance

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;
}