How To Adjust The Divi Logo Height And Size

by | Feb 13, 2019 | Divi tutorials | 9 comments

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

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

9 Comments

  1. Barbara

    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
    • Barbara

      Figured it out. THANKS

      Reply
      • Mark

        Glad that it is solved for you.

        Reply
      • Jeannette

        What did you do, Barbara? I am having the same problem and the height adjustment in the Theme Customizer is not working.

        Reply
        • Mark

          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.

  2. Danielle Mah

    Hi! I think your CSS code isn’t showing! I’d love to learn this hack! THANKS!

    Reply
    • Mark

      The code is back now thanks for the heads up

      Reply
  3. Nityia

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

    Reply
    • Mark

      Sorry the snippet was gone after an update I have placed it back now.

      Reply

Submit a Comment

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

close
Lifetime access to all Divi child themes and plugins
0 Shares
Share
Tweet
Pin
Buffer