Today’s Divi trick is very simple. We will make the logo of our site exceed the header area and float over it and the following sections, a very cool effect that is achieved in a couple of minutes.
The first thing is to open the Theme Customizer from the front page of your website and go to the Header & Navigation -> Primary Menu Bar section and increase the size of the Logo max height element to a value of at least 90.
This is not actually mandatory but it will look better, and will not give problems.
Next, go to Additional CSS and add the following code:
/*Logo between section*/
@media only screen and (max-width: 980px) {
#logo {
min-height: 80px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 150px;
}
}Code language: CSS (css)And the result is…
As you can see, the effect will be more attractive if your logo is not a square and has a transparent background, good quality…but the point stands.
