Update 8. December 2016: Divi is now at version 3.1 and this article is getting very outdated. We are leaving this up for now since it may have some value for people using earlier version of Divi, but please do not try to use this with newer Divi versions.  If you would like to hire me for customization work, then please send me an email.

Update: This article has been updated for Divi 2! However with so many more options for centred logo / headers etc, it is next to impossible to write a guide that can foresee every possibility. If you have made some css alterations yourself to the header or menu, then that may also affect your results. If you get stuck, I will try to help, but there is a limit to how much I can do since debugging other peoples code is very time consuming. Please check the comments below, to see if anyone else has had the same problem as you. 

Our Nerd Nomads website is built on the Divi theme from Elegant Themes. We have however made quite a few modifications to the out-of-the-box look of Divi. We were recently spotlighted on the Elegant Themes blog, and a frequent request from commenters was a breakdown of how I customized the logo. Here is a quick rundown on how to change the Divi logo size, that will hopefully help you get started.

A little word of caution

Before we get started I have to ask you to be careful when modifying theme files. Save backups of everything before you begin, and don’t try this on a live production site, unless you really know what you are doing, and how to undo it! You can do this tutorial even if you don’t know any CSS, but it is a LOT easier if you learn some HTML and CSS.  I am a member of Lynda.com, a video tutorial training website, and I have learned a lot from them about web development and design. If you want to check it out, here you can try it completely free for 10 days.

 

Still here? Ok, let’s go!

I am working on a fresh install of Divi. I have made a child theme, and will not be touching the original files. I highly recommend that you use a child theme when doing modifications like this. Although for the first part of this breakdown we will only be adding some CSS code, so it is possible to do it without. If you don’t know how to make a child theme, here is a link to a breakdown of how to do so.

This is Divi right out of the box:

divi1

The Logo is kind of small, so let’s upload a larger logo file. The Nerd Nomads logo is 322 x 160px.

divi2

Hmm, not quite what we want, is it? Let’s dig into the CSS, and add the following (this is based on our logo dimensions, your max-height value will vary with your logos height):

 .et_fixed_nav #logo {
max-height: 160px;
}

That gives us this:

divi4

Better, but the shrinking effect when scrolling down does not work. You may not want the shrinking effect, if so you are done! Congratulations 🙂

If you do want the shrinking effect, then we need to specify a minimum size. Size will vary with your logo. Add the following CSS:

 .et-fixed-header #logo {
  max-height: 90px !important;
 padding:0 !important;	 
}

Okay, the shrinking effect now works!

Sidenote: Depending on the size of your logo the shrinking effect may now be too fast, or perhaps too slow. To change how fast the shrinking occurs, you can experiment by adding the following code. Make sure to change the 0.4s value to how long you want the transition to take:

#logo {
transition: all 0.4s ease-in-out;
}

Now it is really up to you – How do you want to style it? You may be finished here, if your logo suits this style better than ours does 🙂

Lets take it a little further. Want to have the logo flush with the top? Add to CSS:

#logo {
	position: relative;
	top:-18px;
}
divi5

Want it overhanging the main content like we have? Just change CSS position:relative to position:absolute.

#logo {
	position: absolute;
	top:-18px;
}

divi6

Finally, if you want it sticking to the left of the screen like ours,  this is easiest done by making a small change to the header.php file.

This is where that child theme comes in handy! Just copy the header.php file from the Divi directory, to your Divi-child directory.

And make the following change: Move line 120, and insert it at line 129.
Screen Shot 2014-05-22 at 23.51.43

This moves the container class, which is responsible for centre positioning everything, below the logo. That way the logo will not be centered any more. Also change the logo CSS a little to vertically position the logo correctly:


#logo {
	position: absolute;
	top:0px;
}

divi8

You may want to push the main-content further down depending on what you have at the top of your page.

Bonus tip

With the logo this large, it may become too large for you when viewed on smaller screens, mobile phones etc. If so, add the following to scale the logo based on screen size (experiment with the values depending on what the size of your logo is, and what suits your design):

#logo {
  max-width: 30%;
  min-width:150px;
}

Now the logo will scale with the screen size!

So the complete code for our logo looks like this:

#logo {
	position: absolute;
	top:0px;
	max-width: 30%;
	min-width:150px;
}

.et_fixed_nav #logo {
	max-height: 160px;
}

.et-fixed-header #logo {
    max-height: 90px !important;
	 padding:0 !important;	 
}

Boxed layouts in Divi 2.0

For Divi 2.0 Elegant Themes made it possible to use a boxed layout on our sites. This was done by adding a new outer container class with a fixed width to the entire page. If you are using the boxed layout function, the last step we looked at above for moving the logo to the left on the screen, will give you a different result. The logo will be restricted by the new outer container class, and sit flush to the left on the boxed layout instead of left of the browser window . Depending on your logo this is another possible look.

Screen Shot 2014-05-23 at 00.04.49

2. Bonus Tip for boxed layout with Divi 2.0

If you want to use the boxed layout and have the logo flush to the left of the browser window, you are probably better off experimenting with setting the logo to position:fixed than trying to move things around in the header.php file. This positions the logo in relation to the browser window. I’m not a huge fan of using this because the logo will cling to the top of the browser window no matter what. It will  for instance hide behind your wordpress toolbar whenever you are logged in.

If you want to try this change the #logo class to:

#logo {
	position: fixed;
	top:0px;
        left:0px;
}

The result will be:

Screen Shot 2014-05-23 at 01.31.15

Learning More

If you want to be able to make your site look exactly the way you want it to, it is a great idea to learn some CSS and HTML. It is easy, and there are tons of resources out there, both good and bad.

I am a member of Lynda.com. Lynda.com is a really great and professional way to learn about WordPress and HTML/CSS. Their training videos are very well made, and also comes with course files and transcripts, for those who prefer learning by reading.

Apart from web development they have courses on just about any subject including writing, photography, business management etc. With new courses weekly, it is an great place to learn. And they have a 10 day completely free trial period!

Hope this was useful! Let us know in the comments below what you think, and if you have any further questions.

Happy Divi tweaking! 🙂

Some of these links are affiliate links. If you choose to purchase any of these courses, it would really help us out if you bought through one of our links. We will earn a small commission, that helps us with the costs of running this website, at absolutely no extra cost to you. So thank you!

Thanks for subscribing! Please check your email for further instructions.

Thanks for subscribing! Please check your email for further instructions.

Thanks for subscribing! Please check your email for further instructions.

Thanks for subscribing! Please check your email for further instructions.

Thanks for subscribing! Please check your email for further instructions.

Thanks for subscribing! Please check your email for further instructions.

Pin It on Pinterest

Share This