A web designer does not like it when a client asks him to make the logo bigger. But since such a question is inevitable, making the Divi Logo size bigger is easily done with the Divi Theme Customizer.
Ever since Divi was introduced to design and develop an elegant theme, it has received a lot of updates, including a true front-end page builder tool with inline editing as well as the Divi Logo size. To see if this WordPress page builder fits your needs, read the Divi Review.
When you customize the logo of the client who requests to make it bigger, the designer should base the customization on the standard size of a Divi Logo. Generally, the logo should be around 45 x 250 on your website, but the logo can be larger than this and use the Divi theme customizer control to create the perfect size. Around 90 x 500 is an excellent size that will give you room for adjustment.
Divi Logo Sizes
Divi Logo size is a sensitive aspect of website building. It is a topic that people need to pay close attention to. Designers should know how to choose the best Divi logo height for a website and how to change or adjust the height and size of the logo.
Logos, which are important in building a website, vary in sizes, shapes, and designs. It is necessary to know the size or type of logo that will suit your website. There will be instances when you exactly know what you want, but getting the desired size and height of a logo becomes a big challenge.
The default dimensions of the Divi Logo PNG are 93 pixels by 14 pixels, which can be adjusted in theme customizer of Divi. However, you cannot adjust the logo larger than the default pixel size. It is something to remember before you upload your logo.
How To Adjust The Divi Logo Height And Size
To change the height of your logo, click on Theme Customizer, then click on Header & Navigation. Then click on Header & Navigation, then go to the Primary Bar Review.
After doing the above, you will see the “logo max-height” field, which enables you to adjust or change the logo’s height to the desired size. This will adjust the top and bottom space of the logo in the menu bar. To adjust the size of the logo, use the ‘menu height’ field to make the changes. Doing so will increase the entire menu bar’s height. To summarize, the menu height will control the height of the menu bar while the max logo height will control the logo height.
How to choose the best Divi logo height for your website
The height settings of the Divi logo in the theme customizer range from 30 to 100 pixels. The menu height has a range of 30 to 300. The logo height default is 54, and for the menu, height is 66. Knowing these will allow you to navigate the field until you get what you need.
How to adjust the Divi logo size and height
The “menu height” fields are used to set the height of the menu in pixels. Divi adds an extra 23 pixels to your setting. The displayed menu bar height includes the extra space. This means that there is a 66 default menu height setting, which translates to an actual height of the menu bar of 66 + 23, which equals to 80 px. You have to remember this when making the calculations of your logo height or size.
An appropriate logo height is affected by the height of the menu and the font size. Knowing them will allow you to play around with the controls for all three of them until you get a perfect setting, which translates perfectly to whitespace and balance.
How to set the fixed header logo height
For the “fixed header” option, you must set the logo height for the fixed header. To do this, you have to go to Divi’s fixed header field. You have to repeat the same process that you used when you set the Divi height.
How to upload your logo to Divi
Click Divi on the WordPress dashboard menu. Select Theme Options, then click on the General tab at the top. Once you get there, you will see the Logo field on the Upload image button, where you will select and upload the image of your logo into the media library. Click on Set as Logo so the URL of your logo will be included in the option field. If there is a need to go back to the default Divi logo, click the reset button, and your uploaded logo will be removed.
There is also the option of choosing from 5 different header styles from the Theme Customizer. The options will determine where the logo will be placed when uploaded in the header. The options are Default, Centered, Centered Inline Logo, Slide-in, and Full-Screen.
The Divi theme has very much everything in store for you and promises you a great experience, especially when you want to upload your logo into the media library.
Frequently Asked Questions
Even people who have been using Divi for quite some time still have some questions about it, including the following:
How do I make my logo bigger in Divi?
When you start building your Divi theme website, you will notice that the logo you upload is always very small. You can change that in the Theme Customizer. Then, you have to log into your WordPress Dashboard and click on Divi, then Theme Customizer, then Header & Navigation, and finally, Primary Menu Bar.
To increase your menu height, you need to use both the “menu height’ and ‘logo max-height’ controls. In the beginning, it can be somewhat confusing as you would think that to have a bigger logo, all you need to do is adjust the max logo height. But it is not the case here.
Menu Height determines the height of your primary menu bar. Logo Max Height determines the percentage of space within the bar occupied by your logo, which means that you need to change the menu height before you see any result in the height of the logo.
You have to upload an appropriately sized logo before you start adjusting. The logo is set at 43 pixels high, reducing to 30 pixels once you scroll. If you want it 2 to 3 times as high, you have to upload a logo that is 80 to 130 pixels high.
Play around with this until you master the technique.
How do you make a Divi overlapping logo?
An overlapping logo is a good solution to the problem of having your logo bigger without having to adjust the height of the menu bar.
Let’s assume that you are starting with a portrait-shaped logo that is barely visible because it is way too small.
The first step is to upload a logo in theme options. You must be very familiar with how to upload a logo to do this.
Next step is go to your WordPress dashboard and navigate to Divi, then Theme Options, then CSS, which is found at the bottom of the page, and add the following code:
- @media only screen and (max-width: 980 px) {
- #logo {
- min-height: 100px;
- }
- }
- @media only Screen and (min-width: 981 px{
- #logo {
- min-height: 120 px;
- }
- }
Most logos will not be displayed much bigger than 250 px wide; you should be uploading a logo image that is around that same size.
- @media only screen and (max-width: 980 px) {
- #logo {
- min-height: 100px;
- }
- }
- @media only Screen and (min-width: 981 px{
- #logo {
- min-height: 120 px;
- }
- }
Most logos will not be displayed much bigger than 250 px wide; you should be uploading a logo image that is around that same size.
Conclusion
Most of the time, it is best to keep your logo small because large logos can be a distraction. But if you want to use a large logo, you will have better results if you work hard into the design of the site.
Your logo must look good against an all-white and all-black background. Check the size of your logo on the desktop, tablet, and phone screen in the theme customizer. Play around with the adjustments of the header, including the height of the menu, Divi logo size, including Divi logo height, and menu fonts until you arrive at a balance that is appealing to the eye.
