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

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.


Written by Justin Gluska

Justin is the founder of Gold Penguin, a business technology blog that helps people start, grow, and scale their business using AI. The world is changing and he believes it's best to make use of the new technology that is starting to change the world. If it can help you make more money or save you time, he'll write about it!

Subscribe
Notify of
guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments