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:
.dd-slide-down-header .et_pb_sticky { -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!