Our logo is a very important part of the web project (and of a brand in general), so today we will see how to insert it and modify it so that it integrates with the design and looks great.
In the Divi theme of Elegant Themes, the logo is on the top left of the website.
To insert it we must go to our WordPress desktop and enter the Divi theme options.
In “General” we will click on “Logo” and we will place the URL of the logo in the field in which it corresponds. You can also upload it in the “Upload image” button. At the end of the process, of course, save the changes!
There is a difference between the height of the menu bar and the height of the logo, it is necessary to have clear measurements of each one so that your design looks great.
Height of the menu
The height of the menu in Divi is set in pixels, but it is important to know that Divi adds 23 pixels so that you can see the difference between the height of the logo and that of the menu.
For example, if your menu has a height of 80 pixels, the actual total height will be 103 pixels. The logo can not measure more than the menu bar, so you should consider the measurement of it so there is enough space up and down.
Logo height
Once you have configured it to the height of the menu bar, we will use the “logo max height” option.
The difference between the height of the logo and that of the menu bar should be 75%, that is, the logo can, at most, cover 75% of the bar. If you want to place a logo whose height is close to the one you configured in the menu bar, you must first increase the height of the menu bar and calculate 75% of that number. That will give you the maximum height the logo will have.
Fixed header height
There is a second configuration that you must make to the logo if you use the fixed header or fixed header option. Follow this route:
- Divi
- Theme customizer
- Heading and navigation
- Fixed navigation configuration
In this last option you will find the configuration of the height of the fixed header. It is the height it will have while the user scrolls and works in the same way as the menu bar we configured before, adding 23 pixels to the total height. It does not offer the configuration of the logo, but uses that height that you determined for the menu bar.
