Gold Penguin Logo with Text

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
Updated November 14, 2022
sticky menu hero header in breakdance builder
sticky menu hero header in breakdance builder

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 monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Reading Time: 1 minute
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
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross