Create overlapping logo with Divi

12. February 2020

If you have been looking for a snippet to survive your Divi website logo, this tutorial will help you. It’s super easy to implement and will set your site apart from the standard look.

Let’s go

If you haven’t already done so, you should upload a suitable logo first. You can do this under Divi > Theme-Options.



Then open the WordPress design modifier.



Now we have to make sure that the height of the logo is the same for both the primary and fixed navigation bar. To do this, open both tabs and set the height that suits you visually.



In our example we use a height of 66, but you can choose any other height. But it must be the same under both settings.



CSS code for protruding logo

Now it’s time for the CSS code. To make the logo stand out above the navigation bar, you can add the following CSS code in the field additional CSS or the style.css of your Divi Child Themes:


min-height: 110px;
@media only screen and (max-width: 980px) {
min-height: 80px;

Save and done! The logo should now protrude over the navigation bar.

Any more questions?

Suggestions for improvement or suggestions for further articles? Then use the comment function below this article!

We can also do the tutorial for you. Just send us an inquiry.


Sofern Ihnen der Artikel geholfen hat, können Sie sich mit wenig Aufwand revanchieren!


Bitte hinterlassen Sie uns eine positive Bewertung.


Falls Sie Fehler entdecken oder ein Artikel unvollständig ist, freuen wir uns über einen Kommentar.

Bewertung erstellen


Tell us what you think! Reply now

Your email address will not be published.