How To Adjust The Divi Logo Height And Size

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.

Change the divi logo 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

You Might Also Like…

9 thoughts on “How To Adjust The Divi Logo Height And Size”

  1. 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.

    Reply
  2. Hello!
    I am not seeing “the following snippet code” in your article in order to change the logo height for mobile and tablet.

    Reply

Leave a Comment

2 Shares
Share
Pin2
Tweet