Every logo is unique and has its own shape and size for that reason we need to be able to adjust the height of the logo in the menu bar. Below I will be explaining how you can adjust the height of the Divi logo on desktop and on tablet & mobile devices. For the tablet and mobile we will be using a little bit of CSS. For more tutorials about the Divi logo you can follow this guide.
If you are using a portrait oriented logo than the overlapping logo tecnique can be a great solution for you. For that I recommend to use this tutorial: How to Create a Divi Overlapping Logo
Changing the Divi logo height
For desktop
To change the logo height you go to:
Divi > Theme Customizer > Header & Navigation > Primary Menu Bar
In the logo max height field you can change the logo height. This will adjust the top and bottom space of the logo in the menu bar. If you still want the logo to be bigger than you can change the menu height field in this case the entire menu bar will increase in height.
For tablet and mobile
The above method only works for desktop but you can easily change the logo on tablet and mobile by using this CSS snippet code. Place the following CSS in Divi > Theme Options > CSS
@media (max-width: 980px) {
#logo {
max-height: 80% !important;
}}The max-height percentage is the height of your logo in the menu bar you can change this value to your needs.
If you are using a very wide logo than it can overlap the menu items on smaller screen sizes. If that happens than you can use this fix:Â Fixing the overlapping menu in Divi
I’m trying to get my logo into divi…. it is my signature. I have placed it in a file 500X500 px and when i load it into divi it is microscopic! I can’t even enlarge it to where I can read it using the height adjustment. Am I just doing something wrong? what size does my file need to be? i don’t know what to do.
Figured it out. THANKS
Glad that it is solved for you.
What did you do, Barbara? I am having the same problem and the height adjustment in the Theme Customizer is not working.
Hi Jeannette,
Maybe your logo image have a lot of white space around. if this is the case you need to crop your logo and remove that space on your image.
Hi! I think your CSS code isn’t showing! I’d love to learn this hack! THANKS!
The code is back now thanks for the heads up
Hello!
I am not seeing “the following snippet code” in your article in order to change the logo height for mobile and tablet.
Sorry the snippet was gone after an update I have placed it back now.