Categories

Logo Size Customisation With The Divi 2.0 Theme – Updated!

Dear Reader: We may get commissions for purchases made through links in this article, at no extra cost to you. This helps keep the site running and free for all. Thank you! ❤️

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.  

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!

Photo of author

Written by Maria Wulff Hauglann

Maria is a Norwegian travel nerd who has explored more than thirty countries on four continents. She holds a master's degree in Computer Science, as well as an MBA. In 2014 while on a year-long trip across South East- Asia, Maria co-founded the travel blog Nerd Nomads to help others get out and explore the world. In 2018 she left her day job permanently for a life of full-time travel. See our about page for more about Maria.

199 Comments

  1. Hi,

    Thanks for your advise on logo size customization.
    I am a newbee in website creation, I was wondering which code editor your are using?
    Mine doesn’t have a black background and doesn’t color the codes like yours (your divi7.jpg picture).

    Thank you in advance,

    Kind regards from Congo DRC.

  2. Thanks so much for this information! Again, the website is beautiful and loved your post on ET’s customer spotlight. I’m working on a redo for my travel site in Romania so this has certainly been an inspiration to me. Best wishes!

    • Thanks jhj4,

      Really happy to have been an inspiration! Please let me know when you get your site up, I would love to have a look! 🙂

      • Hello! Well, thanks again for helping adjust the standard logo on divi to something as cool as this! Even with the 2.0 update that gives some logo positioning variations, your workaround is still the best. The site I was developing on Desktop Server is live now at BucharestExpat.com, and is a re-do of our Romania travel blog we started in 2009. It”s the beginning of a huge network of Romania travel websites for us – so naturally I am keen to read through your site constantly being the same industry. Although Bucharest Expat is live there are still many many elements to finish up, but we had demand in the marketplace to get the new site up in any state of completion. You can see the logo we did there a’la Nerd Nomads – hopefully we did it correctly (also its’ pure coincidence that our logos are virtually the same colour – I swear I didn’t copy you!). Thanks again and hope to run in to you in Bucharest some day in your travels…

        • Hi jhj4!

          Thank you so much for your nice comment! Glad to hear that this blog post was of help to you, really appreciate it.

          Love your webpage, it must be the ultimate travel guide and travel resource to Bucharest! You have done a great job! Hehe, so funny that we have almost the same background color on our logos :).

          We have unfortunately never been to Romania and Bucharest, but would love to go there! It look so beautiful! We will definitely get in touch with you when we go to Bucharest, would be great to meet you!

  3. Maria,

    A very easy to follow tutorial.

    Thank you for taking the time and effort to do this.

    Cheers,

    John.

    • Thanks Jon! It’s actually my first tutorial ever, so I’m very happy you liked it!

  4. Yep, it helps, I’m actually wondering how you made the paper-like background. Thanks Maria

    • Hi bb,

      Thanks for commenting!

      I can’t promise anything on the paper background, but I will try to find some time to write something for you.

      • Thanks Maria, you’re full of gems! I’m expectant please. Can I customize divi to look like the site shown in the cloudup

        This is a layout I’d love to customize with Divi and while I can achieve the lower part, the header region seems challenging. Any suggestion will be appreciated. Thanks

  5. Hi, and thanks so much for the entertaining web site AND this post on customizing Divi! I’m just starting my web site with Divi so this is definitely something I plan to incorporate into my design!

  6. Thank you! Love your site. I was just thinking, “I wonder how she got the logo positioned like she did… and then I found this post while checking the site out. Thank you so much for taking the time to share the CSS and PHP edits. Well done!

    Also liked the stamp effects on the left side of your blog posts. Wondered how you got them moved off the page like that.

    • Thanks for the kind words, Bob!

      It’s my first tutorial, so I’m really happy you guys found it useful!

      About the stamp effect, I’m not 100% happy with the way that is implemented, so I’m gone be slightly changing the way that is done here soon. Just waiting for Divi 2.0 to come out to see what the changes are first.

      I’ll be sure to document the steps once Divi 2.0 comes out, and write something on it then.

      • Thanks for a great tutorial.
        being rather new at WP – I need a little guidance.. when you edit the CSS in the first section (prior to the header.php) where are you doing that?
        thanks
        Michael

        • Hi Michael,

          I’m using a child theme. Above I linked to an article showing how to get started with a child theme. It includes all about editing the child themes css.

          If you do not want to use a child theme, then you can add css in your WordPress admin under the menu : Appearance -> Divi Theme options -> General settings. At the bottom of that page there is a box called: Custom css

          Hope that helps!

          • Maria, I know you did not intend to troubleshoot our issues – but I have tried to follow the instructions using the custom CSS – inserting this code :

            #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;
            }

            and editing the header.php – but the logo just sits there
            http://www.sawdustandwoodchips.com

            thanks for you patience!!

          • Hi Michael!

            As far as I can see, it seems to be working on your site. But the logo is hidden behind the main content.
            To fix that add z-index:100 to the #logo css block.

            Like this:

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

            And remember that max-width and min-width are optional and they are only used to scale the logo on smaller screens. If you use them, you need to experiment with the values to find what suits your logo size and design. Try to resize your browser window, to see how different values effect the logo.

            Hope that helps!

          • Hi Michael!

            So glad to hear that this tutorial worked for you! Your logo on your webpage looks great! Tim has some really good suggestions about improving your webpage. Your wood work is amazing, love it! Keep up the good work! 🙂

        • Hi, Michael.

          Love your wood work skills!

          If I may, I’d like to offer some design observations about your site to help improve its presentation.

          1. Your logo’s typeface component will render better on the Home page if it were white instead of black. The black doesn’t provide enough contrast. Try adding a 1px depth, 1px offset drop shadow (in Photoshop; presuming you’re using PS to create the logo).

          2. Your Home page slider images are large files because their dimensions are large. The problem there is twofold: your Home page takes too long to load, and your user’s browser is forced to resize each slide image.

          – Re-size your slide images so they are the correct size for the slide, and save each image so that they are no more than, say, 150Kb. At the moment they’re ~2Mb and 3648 x 2736px – too big for a web page regardless of your user’s internet speed.

          – The problem is compounded by having 5 x slides = 10Mb download in images plus your other images below. Again, get into the practise of creating images with dimensions appropriate for the page, i.e. don’t force the user’s browser to do the heavy lifting.

          The faster your pages load for your visitors, the more likely they’ll stick around. You want to aim for page loads no greater than a few seconds.

          Cheers,

          Tim

          • Yes – this is very much a work in progress – Thanks for the pointers – I did the logo looks MUCH better (will scale it so that the bottom of the plane is on the navigation footer. Will resize images – I mistakenly believed that the upload mechanism did some magic… I am used to designing websites with Fireworks and Dreamweaver.

  7. Great site! Just switched my site from Origin to DIVI. Just figuring it out.
    Not only how to make it but also what to tell and what to post. And how to organize it all. This is an inspiring site. Thanks

    • Thank you Eric!

      Very happy to be of inspiration! We are tweaking and experimenting all the time as well. It never ends. We have a lot of content waiting to be published, and how to best organise and display it is a challenge.

      Loved the photography in your slider! Looking forward to seeing more of your work when your site is ready 🙂

  8. Maria, great website, great content! As a fellow traveller hit by the travel bug years ago, I appreciate this site even more.

    I salvaged some emails I wrote back in 2001 during a South America trip, and edited and published to my portfolio site (also Divi).
    Happy trails!

    Best regards,

    Tim

    • Thank you, Tim! Great to hear from a fellow traveller and Divi fan 🙂

      The South America emails are very cool! Thank you for posting. Great writing, you really captured the atmosphere very well! 🙂

      Happy travels!

  9. Thank you so much for this Maria. Who would have thought you’d also be a WordPress Theme Customization Consultant. Great job and thanks again for sharing your tips and tricks. Definitely bookmarked this site for regular inspiration!

    • Hi Geno, and thank you for your kind words!

      Hehe yeah, never imaged myself as a Divi Theme Customization consultant 🙂
      I honestly never thought we would get so many nice comments and questions. It’s been great!

  10. I absolutely LOVE your website! It has inspired me to try to create and customize my website using DIVI. I’m a total beginner, but it looks so good, it’s worth trying!

    I am having a problem, however, getting my logo to behave the way yours does. I copied your logo coding and put it in my Custom CSS part on the epanel, but nothing happens.

    I’m using this site while I tweak the new website: http://b91.888.myftpupload.com/

    I also love the way you scooched your menu up to the top. Any hints on how to do that? 🙂

    Anyway, thanks for the inspiration!

    • Hi Diana!

      Really happy you like our site! And happy to hear you are working to customize your own. You can definitely do it!

      I use a child theme and therefore do not use the Custom CSS box inside the admin area, but I just tested putting the css in there, and it works for me.

      The link you posted didn’t work, but if you give me a working link, I’ll be happy to have a look and see if I can spot why it isn’t working for you 😉

      • Huh. Maybe it’s bc it’s a test site. Boo. I use Godaddy, and they put it on this special dashboard so I can switch websites… I don’t even know the terminology. LOL.

        BUT! I hope to change it all over this weekend, so once I do that, I will be able to send you a link you can access. Sorry about that. I can see it fine! LOL. Probably bc I’m logged in.

        Thank you for your help!

        • Hi Maria! My site is up! Let me know what you think when you have a chance! And thank you!

        • Hi Maria! My updated site is up. Check it out and let me know what you think about that logo. No rush! Thanks!

          • Hi Diana!

            Wow, nice webpage! The logo looks great! Love your photos! Nice slider that gives the photos the focus they deserve. You have so much cool content, a shop, tv-series, blog, photos. Had a look at your videos, and was really impressed! They are so professional!

            Keep up the good work! Will def be following.

            -Maria-

            P.S Looking at your html I think you fixed your logo a little differently from what I did, but I think it looks great 🙂

        • Hi Diana,

          I also enjoyed your website. Great design and content. Keep up the great work both on the website and in your video series work. Very nice!

          • Oh, wow. THANK YOU guys!! I always feel so amateurish whenever I design anything–it’s not my best talent. 🙂 LOL. I’m so pleased you both enjoy the site! I think very highly of your websites, and am chuffed (as the Brits say) that you like my site! Yay. Thanks.

  11. Thank you so much! This is awesome. I just applied this and it is exactly what I needed!

    You are a rockstar for sharing this!

  12. Hi Maria,

    would you care to share more about your front page slider? In particular, what size are you setting for your images and did you make any css changes to adjust the slider size?

    I know ET instructions for 1 column slider are 1080 wide by at least 400 height. but I believe their slider is actually 1080×440. if you go too far from these measurements your image tends to get stretched.

    I also notice your writing is all focused in the bottom right hand side and appears to have some sort of shadow which makes it MUCH easier to read on the different coloured backgrounds.

    care to share or point me to other self help guides?

    Cheers,

    John.

    • I just realised you are not using the default slider! but instead you are using a 3rd party slider called soliliquoy.

      I also suspect the main section of text (in white) on your images are placed there with a product like photoshop and that you are using drop shadows to help the text stand out.

      The tidy placement of the ‘continue reading…..’ is a link text and probably a customisable field within the Soliliquoy plugin.

      I’m not really looking to use a 3rd party slider plugin. I’d rather ET keep developing theirs till it works right. ie: more slide change options and better able to adapt to different sized images.

      thanks again,

      John.

      • Hi John!

        Yep you are right, we are using a 3rd party slider. The reason is because Divi`s slider does not automatically show the latest posts.

        As for the text on the images, they are not photoshoped. The drop-shadow is a CSS effect:
        text-shadow: 0.1em 0.1em 0.2em black !important;

        Have never used Divi`s slider, so I`m afraid I don`t know much about customizing it. But you should be able to do something similar, if you find the right html class to style.

        -Maria-

  13. Would love to see a updated version for Divi 2.0 _0_

    This customisation was awesome!

    • Thank you so much Dennis!

      Haven’t had time to look too closely at what they have done with Divi 2.0 yet. I think they have made the header more flexible, but if there is still a need for this customization in Divi 2.0 then an updated version is possible. I’ll be converting this site to Divi 2.0 soon, so I’ll learn more about the changes then.

      • I just updated to Divi 2.0 and there are some major changes in the header.php file, but I was able to figure out where to move the code in the header.php file, so it is still very possible to have the logo effect you so brilliantly created!

        • Thanks Jared!

          Happy to hear that 🙂 As soon as I get a chance to play around with Divi 2.0 a little I’ll update this post for Divi 2.0.

  14. Well, I screwed up the logo in the header.php file – so I’d also appreciate the update as to where to move the code. Thanks 🙂

    • Hi jhj4,

      Logo customisation is now updated for Divi 2.0 🙂

      Hope it is useful!

      • Wow! That was fast, but something happens, my square logo is getting smaller but only the height and not in width .. So logo is getting out of shape..

        • It’s working for me, so not sure what may be going on.

          If you can send me the adress to your site, I’ll be happy to have a look at it for you 🙂

  15. I have updated this logo customisation for Divi 2.0. It’s mostly the same, except that the header file has changed a lot so the line numbers have changed.. But for the standard layout the steps are basically the same.

    It get’s a little more complicated with the new boxed layout option, but I have tried to give those of you who want to use the boxed layout some options as well.

    Hope this is useful to you!

    By the way, I have updated Nerdnomads.com to Divi 2.0 today. A mostly painless experience, but there were some minor annoyances. There are still some small styling issues that I will get to tomorrow.

    Please let me know if you see anything that isn’t working! 🙂

    • (getting rid of the mobile code is working) So there must be figured out a new way for that trick) 😉

  16. Thank you for this brilliant tip!

    I have another issue that perhaps you can help me solve. When I am on the top of the page the and scroll up, the menu does a sudden bump in increase of height. If you check it you will see that my button styled menu item does the same bump.

    Any input appreciated!

    See the page in progress where the issue is here
    http://jostein.wpengine.com

    • Hi Finge!

      Glad you liked the tip 🙂

      I think you are probably Norwegian like us, but I’ll do this in english just in case. And maybe it is useful to someone else as well 🙂

      I think the little jump comes because of the jQuery that removes the class .et-fixed-header when you scroll up. The styles that then becomes active are the ones one step down in the css hierarchy. There is some padding and height differences in your css, that become visible then.

      Try this, add:
      #main-header nav#top-menu-nav { padding-top: 4px !important;}
      #top-menu li > a { padding-bottom: 15px !important;}

      and finally add:
      #main-header {min-height: 60px;
      }

      I think that should do it, or at least get you very close 🙂

      • Thank you Maria!! That did the trick!

        You are absolutely right, Norwegian here too living in Trondheim. I realized that yesterday when poking around. Amazing that you keep helping us even on your travel 🙂

        • Hi,

          Yeah sorry, I have corrected the original reply now. Hope that helps 🙂

          • Hm. Could not find the “min-height: 43px;” and your line numbers does not match mine. I do have a

            .et-fixed-header {
            min-height: 60px !important;
            padding: 18px 0 0 !important;
            }

          • Yes, the line number was in the original stylesheet. But you can just add the code to child theme. I have updated the original reply again. Sorry for the confusion, it’s been a busy day today 🙂

            Let me know if it works 🙂

    • Hi Maria! (Norwegian here too, but as we´re already in the English language 🙂 )

      I have added the codes Finge asked for at the end of style.css, but there is still that weird effect when you scroll down the page??

      Enjoy your trip 🙂

      Best,

      Jorgen

      • Hei Jørgen!

        Finge had done some customisations to his css, so the code I gave him was specific for his site.

        In both cases the root of the problem is the javascript that adds the class .et_fixed_header on scroll down events (and removes it on scroll up). There are two ways (that I know of) to fix this.

        1. Remove the jQuery javasript that adds the class. Easy, but will not survive the next theme update, and will have to be redone all the time
        2. Make sure the css class values don’t change when the class is added.

        In your case if you add this code to your css file, it should hopefully fix your problem.

        #main-header.et-fixed-header {
        min-height:43px !important;
        padding:18px 0 0 0 !important;
        }

        Hope that helps!

        -Maria

        • So sorry to barge in on your vacation. I´ve added the code to my style.css file, but it did not seem to do the trick…. :/

          • There are a couple of things that make this a little complicated 🙂

            1. You are using the new centred logo/ menu settings in Divi 2.0. I haven’t really covered this in this article, so some css is different.
            2. It is really helpful if you use a child theme, that way I can see what code you have added. If you just add it to the existing css file, it is hard for me to see what is new/ changed code. It will also be overwritten on the next theme update.

            I did some experiments in my child theme with the centered header. Could you try the following code either in a child theme css file (easier for me to debug), or in in the admin under Apperance -> Divi Theme Options -> Custom CSS

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

            #main-header.et-fixed-header {
            min-height:55px !important;
            padding:18px 0 0 0 !important;
            }

            #top-menu-nav {
            height:37px !important;
            padding-top:10px !important;
            }

          • Great! So happy to hear that it worked! Best of luck with your webpage! 🙂

  17. Hi Maria,

    I found your wonderful blog thanks to the Elegant Themes spotlight, and have to say I’m a huge fan of all the customization that you’ve stylized into the Divi theme. Well done! I’m wondering how you’ve worked around having absolute positioning with your main header menu. Are you using the Boxed Layout?

    Thanks for working so hard on helping out everyone who is asking you all of these questions, you provide such quality support, ET will be knocking on your door asking you to work for them!

    Krist

    • Hi Krist!

      Thank you so much for your great comment! 🙂 Hmm, I am not sure I understand what you mean by your question about the absolute positioning of the main header menu? No, we are not using the Boxed Layout (that is a feature of Divi 2.0, and we created our site before that).

      Hehe, Elegant Themes have not contacted us with a job offer yet, but who knows. 🙂

      -Maria-

  18. This was incredibly helpful thank you. I am just starting to use this theme and think it will be pretty decent once I get a few things figured out.

    One question to add to your input here. What if I want to get rid of the shrinking effect like you did but align the menu down to the bottom of the ‘box’ instead of the top. I have tried to figure it out and got it moving but can’t get it aligned at the bottom. There is conflicting margins and paddings somewhere I can’t figure out and about to give up and do something different and thought hey! I’ll ask Maria!

    Thanks!

  19. Hi Maria
    Thank you for your sharing. Actually, I want to know which plugin that you used for registration (sign up) at the end of your website. And also please tell me how I can add icons like you added in your menu.
    Thanks

  20. Great tips, thank you! I’ve been posting on the divi forums trying to get an answer to my dilemma. If you go to the site I listed you can see I increased the header size. Do you have any idea why the content loads up the page behind the header and then drops down after the page loads?

    • Hi Abbe!

      Sorry for the late reply, we just arrived in Malaysia yesterday.

      Not sure I see the problem, the page seems to load fine for me. Did you fix it? The ET forum guys are usually pretty good at these things 🙂

      If not, could you tell me a bit more how it appears to you, and what browser you are using etc? Then I’ll try to help.

      • Hi Maria, thanks for getting back to me. I actually figured it out. The ET guys have been great at helping me with other issues but for some reason no one could figure this one out. I finally found the code I needed to adjust.

        body.et_fixed_nav.et_boxed_layout #page-container { padding-top: 165px !important; }

          • Haven’t had time to test it, but it is certainly possible that they have changed something in Divi 2.3 that breaks the code. I’ll add a warning to the top of this article, and when we get some free time, we’ll have a look and see what has changed. Thanks for letting us know 🙂

  21. i have divi on my website however i have centered the logo and i want to increase the size but when i change what you showed in the tutorial it doesn’t affect the logo at all so i was wandering what can i do

    • Hi Dennis!

      The centered logo option probably works a little different from this. We have not had the time to look at this yet, sorry. Will try to look into it when I have the time. Stay tuned! 🙂

  22. Great tutorial – just what I needed. One thing I think you left out, the transition speed. Mine had a default of .2, which for larger logos is too quick.

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

  23. Hi Maria!
    Thank you for your post. Thank you for your example showed how you can get away from the “template” of the site and demonstrated the feasibility of DIVI themes.
    I can digitize and embroider designs, site building but I’m not very good.
    I did everything as you have written, but unfortunately on my site for some reason it does not work. Maybe you can find a bit of time, something to see what I did wrong?

    Here is the code that I added to the Custom CSS:

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

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

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

    Here is the site:

    http://embrostitch.com/

    • Hi Jury,

      I´ll try to help, since Maria is a little busy at the moment 🙂

      As it says in the tutorial, sizes will vary with you logo´s size. So you need to experiment a bit to find what works with your logo.

      Since you logo is very wide the max-width:30% is stopping the logo from showing at it´s full size. If you for instance change that to max-width:40% it will show in full size.

      If you want it to shrink when scrolling down, you will also want to change max-height in .et-fixed-header #logo , since 90px is actually higher than you logo is. But it all depends on how small you want the logo to become when shrinking.

      I can´t give you any exact values, since that depends on your logos size, exactly where you want to position it, if you want it to shrink when scrolling down etc.

      As a general little hint, it is a good idea to follow this tutorial step by step, and see that one step works before you add code for the next step. By jumping ahead, and adding inn the final code that includes for instance the bonus code for mobile screen resizing, it is easy to get confused. Exact values will depend on your logos size.

      I hope this helps you a little on the way 🙂

  24. Thanks for sharing this Naria, I work first time with divi and get grey hairs .. without this posting 😉
    Sincerely
    Peter

    • Hi Peter!! So glad this could be of help to you! We don`t want anyone to get grey hairs, hehe. 🙂

  25. Hey,

    thanks for this great tutorial. I did the part with the logo (Works fine) but couldn’t figure out how to get full width menu at the top while using the boxed layout. Can you share how this is done?

    Thanks

      • Hi Philip,

        This tutorial is really about some tips for size and positioning of the logo, and not the menu. There are so many different possible layout options, logo sizes and designs out there, that without seeing your site it is really hard to offer any suggestions. Also right now we unforunately don’t have the time to offer very much free development help.

        I would use the excellent Elegant Themes support forum. I am sure they will be able to help you out.

  26. Thanks for this guide! I’ve tried some of the customizations, and they worked just as you explained. Then, I’ve tried them again and I’m having a strange behaviour: no matter what, just after adding the “.et-fixed-header #logo” line to recover the shrinking effect, the logo displays ALWAYS shrunk. I mean, even after reloading the page, or going all way up in the page, the logo never expands. It just is rendered at full size during a blink and then, when the page finish loading, it shrinks.

    There is no cache plugin, I’ve cleaned browser cache, tried with different browsers, I’ve removed all editing in the style.css of the child theme leaving just the two lines for “.et_fixed_nav #logo” and “.et-fixed-header #logo”… but this issue is always there.

    Any suggestion? (I can’t post a link to the problem because the web is not already online)

    • Well, I figured it out. It was the header.php file which was causing the problem. Just deleted it and everything works a normal.

      I’ve expand the title bar height to fix my logo with “.et_fixed_nav { min-height: 150px; }”. Now trying to figure out how to schrink it with the logo…

      • Cool! Glad you figured it out Litbea! 🙂 Wow, you have such a nice gravatar picture!! Love it!!

  27. WoW! Thank you!!
    I cannot imagine how many hours you have saved me!
    Where do I send flowers?!

  28. Hi,

    I have tried to add

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

    to the style.css in the wordpress dashboard and saved but it does not increase the header size. What could be the problem?

    • Hi Karl,

      Without seeing your site that is impossible to say.It depends on if you have made other alterations to your css, or php files, the size of your logo etc. But make sure you refresh the browsers cache when you make css changes. The max-height: 160px value is dependent on the size of your logo, so check and see how high your logo is, and use that as your max-heigh value.

      Hope that helps.

      Espen

  29. Logo works great on Firefox but not on Google Chrome. Hoping you can direct me towards a solution. I have tried everything. :-/

    • Hi Lori,

      I looked at your site in safari, firefox and chrome, and they all look exactly the same to me. Are you sure you have cleared the browser cache in your chrome browser? Could you explain what you feel is not working?

  30. Hi Maria and Espen!

    I’m a travel blogger like you too, with some online businesses like you too 🙂 This tutorial has been just what I needed to change the logo in a site of mine, thanks so much! Hope you’re enjoying Malaysia if you’re still there 🙂

    • Hi Federico!

      Great to hear from a fellow traveler blogger and digital nomad 🙂 Really happy that we could help you out a little with this tutorial. I took a look at your site. You have a lot of great information there!

      I really like the look of your travel guides. They look so much like a travel magazine. How did you make them? Any tips on what program to use etc?

      • Hi, glad you dropped by and liked the site! As for the guides, I had somebody work on the design for them, they were done using Adobe Indesign. However one was done with some free program which I can’t remember now, would you like me to find out the name?

  31. Dear Maria, how are you doing?
    ,
    I’m new here (and starting to work with websites) and making some improvements with Divi Theme.

    But I still have a couple questions:
    1) How can I access the CSS Box on epannel?
    I mean, there are a lot of informations inside there (style.css). And for example if I want to add any css code how can I modify the CSS code to insert the Overlay Slide Up?
    2) And how can I ajust my company logotype (for a bigger size)?

    Thank you very much.

    Regards

    Ricardo

    • Hi Ricardo,

      The CSS box is called Custom CSS and is found under General Settings in the E-panel. Scroll down to the bottom and you will see it. You can enter your custom css code there.
      If you are gone do a lot of CSS styling, I would recommend using a child theme. There is a link in this article for a tutorial that shows you how to set up a child theme with its own css file.

      This article is all about using a larger logo with Divi. Just follow the steps carefully and that should work for you.

      Espen

  32. Thanks for the advice! Would you have a cheat sheet for the sizes in the image library for this same theme?

    • Hi Shane,

      Not sure I understand what you are asking about? This tutorial is just about the logo size, it can be any size you want.

  33. Great article thanks. Much easier to understand for a non-expert when broken down into each component part.

    Hilsen fra Bergen

  34. Just wanted to add my thank you to the mix!

    This is a very common thing to want to do with Divi and your explanation was not only easy to follow but written in such a way that it’s easy to understand what’s going on and therefore tweak for our own needs.

    Keep those Divi tips coming! Cheers.

  35. Hey great work!

    I’ve a problem with my header on my website (http://store-of-ideas.de):
    I did everything you wrote in your article. but the submenu doesn’t fit to the mainmenu… There is space between them…

    What can I do to solve this problem?

    best regards,
    Lukas

    • Hi Lukas,

      I don’t have the time right now to look at your website in detail, but if you wish to move the submenu up so that it starts just underneath your main menu, then you can do that by specifying the following css:

      .nav li ul {
      top: 33px !important;
      }

      Hopefully that will solve your problem.

  36. Love this, refer to it all the time! Would be awesome to have the code to do the same thing with the fixed header option turned off. I know that changes the selectors…

    Thanks!

  37. hi! thank you so much for your help! i was pulling out my hair until i found your page. 😉 i am trying to add a “drop shadow” to the bottom of the primary navigation bar so that when the page scrolls, it sorta looks like the nav bar is on top of the rest of the page. i have seen it done on another site but am having no luck locating the code i need to do this… pweeeease help me if you can. 🙂 -SE

  38. Hi, Maria. Thank you for css tricks, thats really great. I would be gratefull if youll take a look at my menu http://test.citri.com.ua/e-in/ there is a woocommerce cart icon which is jumping when I’m scrolling down the page, I’ve almost break my brain to fix it..But its not working

  39. Thanks for this post! All I wanted to do was keep the fixed header and disable the shrink effect. Task completed.

  40. Thank you very much for sharing this information, it has been very useful, i have one extra question. I did some of the changes that you suggest here and also add a transparent background to the header, but when I add a submenu it doesn’t fits the header menu, it goes above it and with a solid background, how can I solve that issue?

    Thank you very much.

    • Hi Daniel,

      I’m afraid we don’t have time to debug peoples individual problems any more, there are just too many variables and it takes too much time. However feel free to contact us by email if you are interested in hiring us to have a look at it.

  41. Thanks so much! Worked like a charm!

    Any chance you would know how to align the navigation text link at the bottom as opposed to the top?

  42. 🙂 Thanks a lot Maria, really helpful and inspiring !
    As I’m a french-indonesian “compilation” who do love traveling as well, I wish u great adventures to come and would be glad to share if u got any questions about visiting my loved countries.
    Regards.

    • Thanks for commenting Thomas! Really happy to hear that this was useful to you. We have been traveling a lot in Indonesia. Love that country! The nature, the people and the food, ah, I miss Indonesia already. 🙂

  43. Hello Thanks you so much for your help with my divi child theme. I manageg to adjust my logo to be larger. The problem I have now is that the menu and search icons are a little to high in relation to my logo. I would like them to be in line with the middle of my logo. When i scroll down then they shrink and become in line with my logo which is good. Can ii change the position of the menu and search icon so they are slightly lower when not scrolling and then do as they do just now when i scroll down so that they always remain in line with the middle of my logo

    Thanks

    • Hi Tam,

      Yes, what you want is definitely possible, but I am afraid we don’t have time to customise the code for individual needs.

      I would need to see your site with your logo to determine the exact changes needed. Send us an email if you are interested in hiring us to help you with your site.

  44. great stuff, thanks. WHen you talk about adding the header.php to the child, do you mean copy the text and paste it into the style sheet of the child?

    also you say the number where the line is located, I dont have this, what do you recommend to view the code with a numbered grid like you have?

    thanks again, makes me feel better I went with the divi theme after running into a few problems with it doing things to my layout for no apparent reason.

    • Hi Jedics,

      No, adding the header.php file to the child theme means copying the file to the child theme directory, and then making changes to the copied file there. The blogpost has a link to an article about child themes, and how to use them.

      Line numbers can be found in most code editors. A couple of free alternatives are Notepad++ for Windows or Textwrangler for Mac.

      Hope this helps a little. Best of luck!

  45. Hi Maria,
    You rock at this, and I love DIVI except on the mobile … the slider dimensions crunch the image (as you can see here – http://www.ramblesintosacredrealms.com

    You mention the soliliquoy p[ugin. I know that I could fix this with some jquery, but I don’t trust my skills with that as I do with .php & css

    My question is, since this is a paid plugin, does it integrate well with divi’s theme builder?
    This client’s main site (http://kvkrishnan.com/) renders beautifully with an Organic Theme called RESPONSE – but I don’t care for OT’s support or browser weight & the client wants this fixed ASAP –

    Thank you for a GREAT post!!

    • Hi Lois,

      We did not have any trouble using the Soliliquoy plugin with Divi. It works by generating short codes that you can put in a Divi text page builder module. We haven’t used it for a while now, since we switched to a tile format for the frontpage, but it worked well for us before. Best of luck!

  46. Hi, I’m planning to use the Divi theme for my spouse’s site to replace the actual theme and this tutorial answers perfectly to something missing on divi theme !
    Thanks a lot Maria.

    • Great to hear that we could help you out on the logo size customisation! Good luck with your spouse`s site!

  47. Maria

    Awesome… you make this so easy, even to a CSS dummy like me. I guess the number of comments speaks for itself 🙂

    I am using this your tips on a new site of mine and I can say that, at least in my case (including the shrinking effect step), all works just fine!

    Thanks a million again and save travels,
    David

  48. Hello,

    Thanks for the great tutorial.. Works perfectly.

    I’m trying to get the white navigation section at the top of the page to be invisible on pageload and slowly fade in as the user scrolls down. I can’t seem to find the right css class or id or template file even to edit it in. Can anyone help?

  49. Hey – thank you – this is marvelous – had to tweak the height a bit, but am running the new Divi on the site I’m building (not the one referenced above) and it all works just fine – many thanks!
    Best,
    Larry

  50. To change the size of the logo, I added a /*CUSTOM STYLES*/ section to the bottom of the style.css file.and defined it there.

  51. HI
    I have been trying to get my logo to sit properly on my page, I have played with your settings and have it to where i want it … almost… the top of my logo is cut off now, I like the logo hanging over the header line but would just like the top of the logo to show too.

    thanx Dan

  52. sorry here is the code, that i have added

    .et_fixed_nav #logo {
    max-height: 160px;
    }
    .et-fixed-header #logo {
    max-height: 90px !important;
    padding:0 !important;
    }
    #logo {
    position:absolute;
    top:-45px;
    }
    #logo {
    max-width: 30%;
    min-width:150px;
    }

    • Hi Dan,

      I’m afraid we can’t really debug everyones problems, because every case is different and it takes way too much time. We do offer a paid service for those who need help with Divi customization.

      However I’ll try to steer you a little in the right direction.

      1. Your logo is very large. It is 2804×1089 px. Reduce it to the biggest size you need it to be on your page. If that is max 160px height (like in you css code), then downsize it to that in an image editing program. Also trim away all unnecessary white space around the logo.

      2. Then change the value of #logo top:-45px, until you get the top of the logo showing. Your value of -45px is hiding the top of the logo. A value around -20px will probably work better.

      Hope that helps a little. Best of Luck!

  53. Ever since I switched to the new logo, the shrinking effect stopped working until yesterday when it suddenly worked in an attempt to preview a page but after that, not anymore. Then I found your tutorial but still can’t seem to make it work. Here’s my site http://www.mmo4teen.com. The logo is 340×41. Can anyone point me to the right direction ?

  54. how did you obtain your main navigation menu looks? Do you have a code for this? or do you have a tutorial on how to obtain this?

  55. WOW! This is awesome stuff. Thanks for sharing.

    And all your stuff, and your story is pretty awesome. I have a travel bug that I itch with vacation from work, every now and then. I also like to be grounded, It’s comforting to have a place I call home. So there’s that.

    Just subscribed to your newsletter. My husband and I will eventually take our two boys out in the world, and expose them to as much of it as possible. Plus, traveling and nerdy stuff = definitely up my alley. Thanks for sharing!

  56. Hi..admin nerdnomads,. thanks for this helpful article about change logo size.. but, could u give me information.. how to change your header menu like yours… because header menu divi so standard.. how could u change this and give a icon picture like yours.. Thanks for ur attention and thanks so much if u answer my questions… sorry my english are so bad.. 😉

  57. hi, i’m now using divi template, i made some change on css for tweak portfolio view and it’s work, but somehow my navigation menu is a bit strange, when the site is scroled down there is no default animation effect on it (default is, it becom smaller) and when i open it on mobile browser, the 3 strip menu isn’t clickable and no menu showed.

    can you help me with this problem? thanks

  58. Thanks for Bonus tips.
    I already did it but it was not displaying because I forgot to clear my cache, your post help’d me in restoring my confidence. Keep posting, so much thanks.

  59. Hi, thanks for your tips which are very good instructed step by step for a newbie like me. I like your beautiful Website! Greetings from Spain.

  60. Great post here. It has really help me to change my logo size. Is there a way to have the logo positioned in the center for mobile devices?

    I have the logo setting to the default with the navigational menu on the right, however when on mobile this does not leave much room for logo, and it must be set to a small size.

    I have been trying to figure out how to have the logo centered with the hamburg menu underneath it on mobile devices. This wll allow me to have a bigger logo size?

    • Hi Larry,

      Sure, that should be doable. I don’t have the time to look into this now, but just off the top of my head, I would say that you’d need to write some mobile specific CSS, targeting the screen sizes where you need the logo position to shift. Possibly also using some additional jQuery.

      If you need help with this, we do offer a paid consultancy service. Send us an email if that is of interest to you.

  61. I have used your amazing handy work on my website. Many thanks!! However I would like my logo to be one, smaller size on mobile and tablet that fits right within the menu bar. Is this possible? Thanks very much!! 🙂

  62. Thank you Maria!

    I didn’t think it was possible – but your clear instructions worked perfectly!

    Thank you for going to the trouble of helping your fellow beings, you’re an inspiration.

    Jana

  63. Hi Maria or Espen

    I’m experiencing a resize issue with the logo when it’s viewed on smaller screens. (See what I mean: http://www.ukhozi.com)

    I understand that you can’t debug everyones problems, but I’m down to my last effort and even willing to take you up on your paid service to help me sort this out.

    Please please pleeeeeeeaaaaaaaaaase help!

  64. Hi Maria,

    I am working on a client’s website and I am trying to replicate the overhanging logo like you have on this site, however when I enter the code to do so, nothing happens. I am entering the code in the child theme’s style.css page and it wont work. What mistake am I making here?

  65. Your mod in line 120 in header.php isn’t there anymore (maybe a 2.4 change?) the nearest I can find is in line 114, but I’m not sure where to move it to now?

    I love all your other changes though!

  66. Hi There,

    I am trying to figure out how can I swap logo position on scroll. Logo starts on top of the top menu, then moves smoothly to the side of the menu on scroll.

    Any suggestion of where to start?

    Thanks

  67. I love the design and the easy to follow instructions. I used this on my site and think it looks so much better than the standard Divi logo options. I had to adjust the css to:
    #logo {
    position: absolute;
    top:20px;
    left:25px; }
    In order for my image not to get cut off, but it works. Thanks so much.

    • Happy to hear that it worked for you, Gregg!

      Recent updates to Divi has changed a lot of the header options, so this article is getting a little outdated.

      I’m leaving it up for now since I still think it has some value, but some things may need to be tweaked for it to work on new Divi versions.

  68. Hey. I was wondering if you could give me some insight as to how you decreased the margins on your blog posts. On mobile your blog post texts spans the width of the screen but while testing the divi theme it appears to leave a larger gap between the edge of the screen and the beginning of the text. I have played around with the settings inside divi and have had no success. You could give me some insight or direct me to some code that could amend this? Any help would be appreciated.

  69. Hey, Would you have any advice on changing the logo on the FIXED header to be a completely different logo. The logo goes to small to see clearly so rather than make it bigger Id like to swap it for version of the logo that had the text removed, so its just and icon.

    Ive been playing with this code but to no avail:

    /* Fixed Logo Icon */
    .et-fixed-header #logo {
    img src= “http://www.abovemedia.co.uk/private/gtcontractors/wp-content/uploads/2016/04/GT_LOGO_VECTOR_icon.png” !important;}

  70. Hi Maria,

    Great Tutorial. Explained well.
    Unfortunately it doesn’t work at my website (www.veraargroep.nl).
    De logo doesn’t show anymore and the slider moves all the way to the top.
    The intention is to have a white header above the slider with the hamburger menu and then have the logo (sun) overlap the slider for a part.
    I have tried everything.. a Z-index for the logo also doesn’t do the trick.
    Hope you can point me in the good direction.

    Best regards,

    Gabriela

    • Hi Gabriela,

      I’m afraid this tutorial was written a while ago and does not work well with the current Divi version 3. I have not updated it because I believe the logo size can now be controlled inside the theme settings and no longer require custom coding.

      I suggest you join one of the many Divi facebook groups for some help with your specific problem.

      -Espen

  71. Excellent Post, very well detailed for every need, I love the content of the Travel Blog, I will subscribe, I am also a nomad traveler ;-), thank you congratulations and much success

  72. Thank you. Very helpful. Only used the first code snippet so far – but it works on Divi 3.0 and looks good in Chrome and Safari

  73. Hi Maria
    I want to add more columns in my header, so I can include a contact us box etc. So my question is this. Would it matter if I just delete the header and build my own full width standard section and use that as header? Will there be unwanted scrolling effects or may it be detrimental in optimization or mobile viewing? I have create such ‘header’ below my actual header. But being forewarned might help please.

Comments are closed.