How To Make The Logo Taller And Overlap The Divi Menu Module Tutorial by Pee Aye Creative

How To Make The Logo Taller And Overlap The Divi Menu Module

This Divi tutorial will show you how to make the logo image taller with CSS to overlap the Divi Menu module.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Make The Logo Overlap The Top And Bottom Of The Divi Menu

This tutorial is very easy because it only takes a tiny bit of CSS code and we can add it directly into the Menu module. So go head and go to your Theme Builder header or wherever else you have the Menu module, and open the settings. Go to the Advanced tab, open the Custom CSS toggle, and find the Menu Logo CSS box. This is where you can type or paste the CSS to make the logo image overlap the menu. You can use any value you want, but in our video I am using -30px margin top and bottom. But of course, this is meant to be customized for your logo height, menu height, or whatever your situation happens to be.

margin-top: -30px;
margin-bottom: -30px;
make the Divi logo overlap the menu module with CSS

And that’s it! I told you it was going to be quick and easy, and it sure was!

Make The Logo Overlap The Bottom Of The Default Divi Menu

If you came here looking for the CSS code to make the logo overlap the default Divi menu, then I won’t disappoint you. There are many other tutorials about this, but the snippet below will give you a great starting point. The values are definitely meant to be changed, so don’t expect them to magically work for any size of logo. The values depend entirely on the height and width of your logo, and on how much overlap you want to show.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*set the logo height and overlap on desktop*/

@media only screen and (min-width: 981px) {
	#logo {
		min-height: 100px;
	}
}


/*set the logo height and overlap on tablet and mobile*/

@media only screen and (max-width: 980px) {
	#logo {
		max-height: 80%;
		width: auto;
		max-width: 80%!important;
	}

Be sure to adjust each of the values here to fit your needs!

13
Last updated Aug 31, 2021 @ 11:10 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Martin Hult

    Hey,
    Having the global header with a 0px padding to the top.
    How can I achieve making the logo floating downwards?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Martin,
      This tutorial is for the Menu module, as other people have tutorials already for the default header. It’s also impossible to help with a question like that without seeing it.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart