Design a Sticky Header With Smooth Transitions in Breakdance Builder

Рет қаралды 2,091

Жыл бұрын

Check out our written tutorial for the css snippets we used: goldpenguin.org/blog/sticky-h...
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.org/blog
#breakdance #breakdancebuilder #wordpress #goldpenguin #webdevelopment #elementor #divibuilder #wpbakery

Пікірлер: 15

@kimberleyr.1585 5 ай бұрын

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 :)

@thenewyorkean Жыл бұрын

smooth man, thanks !

@businessvault7315 Жыл бұрын

Good stuff! Always easy to follow

@gold-penguin Жыл бұрын

🔥

@buray1998 Жыл бұрын

Nice design, friend!

@gold-penguin Жыл бұрын

Thanks!

@rubengarciajr Жыл бұрын

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

@gold-penguin Жыл бұрын

You got this .. it takes time!

@ssportslivetvstreaming Жыл бұрын

sticky header with the free version ?

@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

@rcSnooks 8 ай бұрын

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 8 ай бұрын

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?