How to Create an Overlapping Logo in Divi

by | Oct 10, 2017 | Divi Tutorial | 57 comments

Welcome to part 8 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

In this tutorial, I show you “How to Create an Overlapping Logo in Divi.” I’ll show you in detail how to make the logo overlap the top menu whether you have fixed navigation checked or not. I also walk you through how to “shrink” the logo on scroll so when you scroll down, the logo sits nicely in the menu. I hope this helps you take your Divi logo game to the next level!

Here’s the CSS I used:


/*----------Overlapping Logo that Shrinks on Scroll----------*/

#et-info {
    float: right;
}

.et_fixed_nav #top-header {
    position: fixed;
    z-index: 9998!important;
}

#logo {
    max-height: 100px;
    margin-top: -30px;
}

.et-fixed-header #logo {
    max-height: 60px!important;
    margin-top: 0px;
} 

@media only screen and (max-width: 980px) {
	
#logo {
    max-height: 70px;
    margin-top: 0px;
}
	
#et-info {
    float: none;
}

}