We know the typical Divi effect if fixed navigation is enabled. First the logo is big and after scrolling the logo shrinks down inside the navigation container.

In this tutorial you will learn how to hide the logo and after scrolling down the logo will automatically slide down from the top. I used this effect on my own site because I wanted to hide the navigation logo because of the big Logo on the introduction scree.

Preparation

First of all we need a logo of course. You can define the logo inside the “Divi-Options”. You need also to enable fixed navigation or fixed header. It will be also useful if you know the exact size of your logo. To take care on quality I recommend to use a svg.

CSS Code for logo and navigation

Now we need some CSS-Code. We will place this code inside the styles of your “Child Theme” or inside “Divi-Theme-Options” in “Custom CSS”. I recommend to use a child theme.

/*-size of logo-*/
#logo { 
 height: 100px;
 max-height: 100px !important;
 position: absolute;
 width: 200px;
 border: solid 2px #000000;
}

/*-The Position before scrolling including the width of the border if you have one-*/
.et_header_style_left .logo_container {
 transition: all 0.8s ease-in-out 0s; /*-animation out-*/
 top: -122px; /*-position before scrolling-*/
}

.et-fixed-header .logo_container {
 top: 20px; /*-position after scrolling-*/
 transition: all 0.8s ease-in-out 0s; /*-animation in-*/
}
/*---The following part is only needed if you want a fixed height of your navigation bar---*/
#page-container {
 padding-top: 0px !important;
}

.et_fixed_nav #et-top-navigation {
 transition: none;
 padding-top: 16px !important;
}
.et_fixed_nav #main-header, .et_fixed_nav #top-header {
 height: 60px; /*-use this to set the height fixed-*/
 }

Conclusion

This is the fastest and easiest way to slide down a logo. There are some other possibilites. The problem is that you can not use your own class to style your Logo because you have to use the classes Divi is providing. This means after an update it would be wise to check the functionality.
If you need full control it would be better to create your own header with logo and navigation with the divi builder and to hide the standard header.

You can change the time of the animation or the effect to create your own cool versions of a sliding in Logo. This is very useful if your customer has a square log which is to tiny for the navigation bar after scrolling down. Have fun.

The above code was used on my own site: www.flyingfox-web.com.

Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.