Make your Divi Header slide down when Sticky

Animate your Header with this slide down effect!

In this tutorial we show you how to give your Divi Header a catchy effect with this easy CSS trick:

Create a new Header from Theme Builder
Add a Section with your DiviMenus module inside
Make your Section Sticky

Section > Advaced > Scroll Effects > Sticky Position > Sticky to Top

Paste this into Section → Advanced → CSS Class:
dd-slide-down-header

By assigning this class only to the modules you want to modify, you will prevent these styles from being applied to other modules on the same page.

Paste this into Divi → Theme Options → Custom CSS:
.et_pb_sticky.dd-slide-down-header {
	-webkit-animation: headerAnimation .7s;
	animation: headerAnimation .7s;
}



@-webkit-keyframes headerAnimation {
	0% {
		opacity: .5;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes headerAnimation {
	0% {
		opacity: .5;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

Change the height and background-color to your liking!

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos