Design a Sticky Header With Smooth Transitions in Breakdance Builder

Check out our written tutorial for the css snippets we used: goldpenguin.or...
In this Breakdance Builder tutorial, we'll design a sticky header with a Header Builder. Inside we'll put a heading and menu and then set some custom css to smooth animate it all!
Thanks for watching!
Join our Digital Growth Discord: / discord
Read more on our blog at goldpenguin.or...
#breakdance #breakdancebuilder #wordpress #goldpenguin #webdevelopment #elementor #divibuilder #wpbakery

[@kimberleyr.1585]

great video! i just started doing some web design and i had big problems. this tutorial helped me a lot, was fun and looks pretty cool! thanks :)

[@businessvault7315]

Good stuff! Always easy to follow

[@gold-penguin]

🔥

[@buray1998]

Nice design, friend!

[@gold-penguin]

Thanks!

[@thenewyorkean]

smooth man, thanks !

[@rubengarciajr]

good stuff, i'm realizing i don't know anything lol

[@gold-penguin]

You got this .. it takes time!

[@ferdanmena]

You have to use the Header builder option for the code to work, otherwise if you set up a section div, to contain the header just like I did, wont work. just in case someone has the same dummy mistake

[@ssportslivetvstreaming]

sticky header with the free version ?

[@rcSnooks]

There is a bug where you go back on the browser, then forward, and it does the animation when you scroll past the fixed point you came back to. Can't find a fix without some custom js.

[@rcSnooks]

Welp I might as well explain how I fixed it. If you have animations on a fixed div, make sure to set the animation to only animate once (under the advanced section).

[@IvoDimitrovPro]

Thanks for that tutorial. I have a problem with my fonts, They appear blurry when the menu shrinks. Any idea how to fix that?

[@IvoDimitrovPro]

I saw what the problem is. I have frosted effect for the menu, so that it appear transparrent with blur when scroll down. And it translates into all elements in my menu.
I use that code in the CSS and I make the sticky style background color to #FFFFFF21:
/* Frostet Effect */
.frosted {
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}

[@IvoDimitrovPro]

Also, I have a problem with my sticky menu. When I make it sticky the whole website body shifts up and in some pages my headlines are behind the menu, even when I am scrolled to the top. I tried to add margin to the menu but nothing happens.
How can I push down the website (body/content) so that it doesn't go into/behind the header?