Elegant Themes Divi Logo Size

The menu height controls the height of the menu bar itself, while the maximum height of the logo controls the height of the logo. Define your own logo on the Divi Theme Options page in your WordPress Dashboard. For Divi Theme Options, click the Divi > Theme Options link in your WordPress Dashboard. In the Topic Options, under the General tab, find the Logo field.

Change Divi Logo Height

With the Divi Topic you can add your page logo to the headline. While scrolling down, the headline decreases to take up less room and the logo decreases with it. Here you can learn how to adjust the size of the logo, both standard and reduced. More recent Divi releases (Divi is up to 2.7 at the moment of writing) allow the logo altitude to be adjusted using the customizer.

It is not very intuitively however, therefore I will tell you here how you can reach your logo heights. There are two ways to control the logo level in the Topic Customizer: Divi > Topic Customizer > Header & Navigation > Primary menu bars. Menue elevation adjusts the elevation of the menubar itself, while the maximum elevation of the logo adjusts the elevation of the logo.

A slightly complex relation exists between the two, which is useful to be understood in order to correctly check the logo heights. Logo must not be larger than the heigth of the menubar itself. Menue Level " determines the level of the menus in pixel. Divi actually does add 23 additional pixel to your settings to determine the real display altitude of the menubar.

For example, the preset meal elevation of 66 corresponds to an effective meal border elevation of 66+23 = 89/px. Another example is, let's assume you want your logo to be displayed with a size of a 150px high. If this is the case, the menubar should be at least 120px high, and therefore the "Menu height" should be at least 150-23 = 128px.

When you want something more above and below your logo, make sure you take this into account when you calculate the desired level of the menubar. After you have adjusted the altitude of the menubar, you can adjust the altitude of the logo with the adjustment "logo maximum altitude". Indicates this value as a percent of the altitude of the menu area.

This means that a value of 100 makes the logo the same as the definitive altitude of the menubar (after the added 23px). So, to expand on the example above, let's assume that the logo should be displayed at 160px, but the menubar itself should be 100px. In order to do this, first change the altitude of the menubar to 200-23 = 175px (to get a definitive altitude of the menubar of 200px) and then change the maximum altitude of the logo to 75 (as 75% of 100px = 150px).

Please be aware that the logo will never be shown larger than the current picture size. For example, if you want the picture to appear at a distance of at least 150 px, you need to load a picture that is at least as large. When using Divi's Fix Headers feature, you must also specify the logo size for the fix (reduced) headers.

First, go to the preset headers under Divi > Topic Customizer > Headers & Navigation > Fix Navigation settings. Here there is only one interesting adjustment, the adjustment "fixed menue height". Selecting "Fixed meal height" has the same function as selecting "Menu height" above. Allows you to adjust the head size as it appears when the operator is scrolling down the page.

Once again this altitude is added in pixel with and additional 23px of Divi added to get the ultimate altitude. You will find that there is no way to adjust the maximum logo size on the permanent headers. Instead, it will inherit the value from the (non-fixed) head. If you have therefore specified the maximum logo size at 75% in the headline setting, the permanent logo will be displayed at 75% of the size of the permanent one.

You can now control the logo level using two Divi 2.4 controls. When you go to the customized program, you will find an item under "Header & Navigation " Primary Menu Bar" to adjust the standard "menu/logo height", while you will see an item under "Header & Navigation " Fixed Navigation Settings" to adjust the "fixed menu/logo height".

Joining Divi with JavaScript allows you to precisely adjust the logo's size, both full size and reduced size. The page fill function is also set properly to prevent the page from "jumping" when it adapts to the changed head size. Logo height".