Home » Tutorials » How To Resize Your Retina Display Header Logo

How To Resize Your Retina Display Header Logo

While not everyone has made that big leap from standard display to retina, it’s the up and coming thing. Sooner, rather than later, everyone and everything will be on a sharper, clearer monitor. Today, we’re going to talk about how you can resize your logo within your theme files for the themes that come with a retina quality logo included.

First things first, always make sure that before you make any kind of changes to your sites files that you make a copy and save it as a backup.

How it works

In our theme, Dainty, the default dimensions for the header are set at 900 x 420 pixels. This seems large, doesn’t it? That’s because it’s geared to be sharper and appear more clearly on all retina display screens. While the upload size for this header is large, the actual display size is exactly half of what you’re uploading.

For example…if you’re uploading a 900 x 420 header, the display on your site is only going to show at 450 x 210. This allows for the image quality to appear in higher resolution while still shrinking the image down so that it doesn’t appear too large. For example, if you’re wanting to upload a square logo that is 200 x 200 pixels wide you will actually upload it at 400 x 400.

Keep in mind that you can not increase an image size without changing the entire size of the photo. A 200 x 200 pixel image can NOT be enlarged to 400 x 400 to “make it bigger.” This causes skewing and blurriness in the image which is the opposite of what we want.  If you find that you need a larger file size, get with your designer and they can provide a larger file for you if needed.

Change the upload size for your logo

To change the upload size for your logo you’ll want to edit your Theme Functions file. Go to APPEARANCE > EDITOR > THEME FUNCTIONS. Then you’ll scroll down until you see a section of code that looks like this:

If you would like the logo/header image to appear on your site at 200×200, you would change the numerical value of both the width and the height to 400px, exactly double what you want to be shown, and hit save.

A few more changes

At this point, you could navigate back to the APPEARANCE > CUSTOMIZE option and click on the header image and see that your updated dimensions are there and it will let you upload your logo without cropping. However…until you make changes to your CSS file, your new logo/header image might look a little squashed.

Go back to APPEARANCE > EDITOR and you’ll land on the style.css file for your theme. You’ll need to adjust the settings in two places. First, you’ll for the section of your site that looks similar to this:

All you’ll want to do here is set the height to exactly half of whatever height you’ve changed your functions file to be.

You’ll also need to make some adjustments to the width of the title space to make sure everything stays proportionate.  Look in your style.css file for this section of code:

Update the width here to be exactly half of your uploaded logos width.

Once you’re finished making those changes, click SAVE and you’re ready to go!

If you are using the Refined or Captivating theme, navigate to Appearance > Customize > Additional CSS, paste this code and publish:



border

If you’re more of a visual person, I’ve recorded this video that walks through this entire process as well.

border

Find this tutorial helpful? Spread the word

How to Resize Your Retina Display Header Logo

Similar Posts

53 Comments

  1. Do these same instructions work with the Darling theme? I did the adjustments as they are explained and uploaded a new picture (changed to 1100×426 / 550×213) but the space the logo is taking up on my site looks exactly the same (actually squished the new picture a little to fit the old width). Maybe I’m misunderstanding what should happen. I was hoping that this would allow me to fill the space a little more. (I’ve put the old picture back up without changing the dimensions back)

      1. Thank you for the help you would have provided, lol. I wrote out an email explaining what I was looking to do, what I did (following these instructions) and what I thought wasn’t working. I went back into my site to look something up and looks like it did work. Not sure what I didn’t do yesterday but clearly your instructions worked perfectly. Again, thanks!

  2. Thank you for these instructions! I’m always afraid to edit my stylesheet directly(because I have messed things up pretty badly in the past). Instead I copied and pasted the edits into a custom CSS stylesheet with the width and height changes and it worked beautifully! Love that you take the time to write out tutorials for us!

  3. Thanks for this tutorial, it was super helpful at making my header a little larger although now it’s no longer centered in the middle instead it’s centered over to the left. I’ve gone back over the coding and everything looks like it should, I’m not sure what I’m missing. Would you be able to assist? Thanks!

    1. Hi Victoria,

      Can you come over and submit a ticket so we can take a closer peek at this for you?

  4. Hi! I’ve downloaded and installed my theme and installed all plugins. However I cannot get my site (blog) name to display correctly. It leaves off the last letter. How can I fix this! Please help! I’ve submitted a ticket, but haven’t gotten far with that.

    Thanks!

    1. Hi Kathy! Have you tried changing the font size of your site title? Open up your CSS/stylesheet and you can decrease the font size there! Once you do that, you should be able to see the whole title. If you have any issues, feel free to use the contact form to get in touch with me and we can help you get that fixed!

      1. Thanks Courtney. I did resize the font and that worked. I’m so new to all of this. I just took a guess as to what part of the code needed to be changed. Thanks for your help! Now on to work on the navigation menus and categories!

  5. Hi, thanks for this post! I just made these three changes to the CSS and PHP files in my Tasteful theme and it didn’t appear to change my image display size. It’s still displaying very small. Here is it on staging right now: staging1.everintransit.com

    I’ll submit a support ticket now too, thanks!

  6. Hello! I followed all of your {very easy to understand! Thank you! } Directions, but I still cannot get the header to look right! I am just not sure what I am doing wrong. It is too big for my page, but when I try to lower the dimensions, it gets all screwed up too. Help!

  7. I was able to update my logo with the correct size, but on my main front page, the logo is still my smaller version but now it is in a larger space, how can I change the logo on my main front page? All my other pages are fine.

    1. Sara, try refreshing your screen a few times. I’m seeing the larger logo on my end so I’m thinking this is a cache issue on your browser.

  8. Thanks for this tutorial!

    I just bought Glam two days ago (it’s gorgeous!!!), and I tried to make my header expand the entire width of my site. I ran into issues (plus, I didn’t like losing the header image area due to plans to upload my logo), and so I decided to use an image widget in the slider area (in lieu of the slider) instead. This appears to be a great workaround, but I’d like to be able to expand the container in just this area to the full site width.

    Would you be willing to share what code I would need to use to change the container width so that just this slider widget area expands to the full site width? Also, what is the full site width? Thanks so much for any direction you may be willing to offer 🙂

      1. I meant to thank you for your response, but apparently I didn’t. So, thanks!

        I have successfully resized my logo using the video tutorial you provided, which was half of the issue. I’m still wondering how I can make the header image span the entire width of the site (and not just it’s container), though.

        Is this an easy fix? Thanks!

        [btw, I have a coming soon landing page up, so you won’t actually be able to see what I’m talking about. But, I am using Glam]

        1. Hey Kristi! I’d love to help you get that worked out so it spans full width. If you want to email me directly (Assistant@restored316.com) I’m happy to help you get that figured out!

  9. Thank you for this helpful post! I\’m using the Style Theme and followed the directions on my page, I was able to get the image up right on the desktop homepage, but the responsive version on my iPhone has the image huge. How do I fix this?

    Thanks!

    Landra

    1. Hey Landra! Would you send me an email directly with your url and login information so I can take a look (assistant@restored316.com). 🙂

  10. Hi there!

    I used the tutorial you provided to resize my header, and I’m very happy with the result! Well, almost. I’ve discovered that on certain smaller screens, the social navigation (normally at the upper right) wraps around to a second row so to speak. And, that “wrapped” second row is covering part of my header. Ugh.

    If you can’t see what I’m referencing on your monitor, try running my site through gtmetrix.com.

    I am certain that it’s a simple fix – I can see that the padding from the site container overlaps the margin slightly. But, I only changed the functions file as instructed in the tutorial…

    Thanks for your help! **If possible, can you please address this question in the comments, as support tickets have historically taken a very long time to get resolved? Thanks!**

    1. Hi Kristi,

      If you look in your style.css file and look for this section:

      .content, .nav-primary .wrap, .genesis-nav-menu .widget-area, .sidebar-primary, .sidebar-secondary, .site-header .widget-area, .title-area, .wrap, .nav-secondary .wrap, .site-footer .wrap, .cta-widget .wrap, .widget-above-header .wrap, .footer-widgets .wrap

      this is under the Media Queries around line 1627. You’ll remove the .genesis-nav-menu .widget-area from this section so that the social buttons don’t go to 100% at this media size which make them go below the navigation links.

      1. Thanks for the quick reply, Laura! I tried that, and it didn’t work (when that didn’t work, I then tried finding all instances of .genesis-nav-menu .widget-area and commenting them out, and that didn’t work, either).

        When I inspect it, I can see that the padding of the site-container overlaps the navigation menu, in case that makes a difference…thanks!

        1. Hi Kristin,

          I think in your case, come over and submit a ticket so we can look at it closer for you!

  11. Hello Lauren!
    I love my Tasteful theme! I and was able to resolve my last problem! Thank you for your help!

    I have two small problems that seem to be related. If I open a browser so only the main area is showing, the logo is large and centered, if I open it wide enough to see the side bar the logo gets very small and is positioned to the left. As I continue to open it wider the logo will pop to the larger size but then it isn’t centered. And it has be to very wide for the larger size logo to pop in. What have I done wrong??

    I’ve read all the tutorials and watched the video and I just don’t understand!

    Other than this little problem, it is coming along nicely!!
    Thank you for your help!!
    Jan

    1. Hi Jan,

      Your site is looking so lovely!!

      If you look for .title-area in your style.css file and just change that width to 100% this will fix this for you!

  12. Hi there! I have the Market theme and I\’ve looked and looked several times for the first coding that\’s listed above and I cannot find it. I\’m I just not seeing it or is it different for the Market theme? Thanks for your help!
    Becky

    1. Hi Becky,

      It should definitely be in there. The code in the functions file in Market specifically looks like this:

      //* Add support for custom header
      add_theme_support( ‘custom-header’, array(
      ‘width’ => 800,
      ‘height’ => 400,
      ‘header-selector’ => ‘.site-title a’,
      ‘header-text’ => false,
      ) );

  13. Hi Lauren!
    I can upload any logo and it shows up the same size every time (no matter the actual size), so when I use the recommended dimensions is squashes my logo majorly! How can I fix the logo to look more like this:

    /Users/tarahblomdahl/Desktop/Screen Shot 2017-03-15 at 1.25.17 PM.png

    You can see the uploaded logo on top, and the desired size on bottom (it’s uploaded on a page for you to see the actual dimensions of the logo that I uploaded in the header image).

    I hope that all makes sense!

    Thanks,
    Tarah

    1. ALSO, on a side note. The background images that I uploaded look great on the website, however the zoom it A LOT when used on other devices (iPad & iPhone). How do I fix this so that the images aren’t so big when used on other devices?

      I am using the Simply Charming Theme.

      Thanks!

      1. Tarah,
        I can’t trouble-shoot with your site still in maintenance mode. If this continues to be an issue when your site goes live, go ahead a submit a support ticket. Thank you!

    2. Hi Tarah,

      Did you watch the video on this? If not, try that and see if you can get it. If not, you’re welcome to submit a ticket to see if we can take a quick peek.

  14. Hi,
    We really enjoy this theme, but after following these instructions it is still not working. We are using the Bloom theme. Are there any differences with the Bloom theme?

    1. Hi Dallin, Can you leave a link to the site you are trying to resize the header on please?

    1. Tarah Make sure you don’t have anything added to your “header right” section in the widgets area. If there is something there it will push your logo to the left. You will want to remove that. If there is nothing there we will need to see your site live to be able to help.

      1. Hi Lesley,

        I removed my header logo to see if that helped. And now it has disappeared. I also have no widgets in my “header right” section.

        I will send an email with my login credentials 🙂

        Thanks!
        Tarah

  15. Hi! I followed this tutorial using the new Refined theme and when I did, my uploaded logo did not change, but it created a ton of white blank space around the whole logo making the header look weird…I changed everything back and it is still doing it? If I use the default header/text, it works fine. Not sure what happened? Hope this makes sense! Thanks!

  16. Hi there,
    I’m using the Beloved theme and am trying to increase the size of the logo on my site. I’ve followed the instructions posted here and watched the video several times, but can’t seem to locate the specific portion of code (.header-image .site-title) that it refers to in the second half of the video. The title area section of code in the style.css sheet looks different in my theme. Do I need to do something different for the Beloved theme?
    Thanks!
    Lauren

  17. Hi Lauren
    I’ve just bought the Divine theme and am prepping to move over from Blogger and am using a staging site. I am literally stuck on the Header at stage 1. I’ve prepared the image and have followed all instructions and there is no change in size at all. The logo appears as a small image in the middle of big white space. I’ve tried every which way and nothing is changing. Since nothing has changed, I haven’t reverted any of the changes made. I’ve spent hours on it and am so frustrated. Ideas??

  18. Does this tutorial apply to the Market theme? I’ve tried entering the info into the additional CSS area since I don’t know code, but nothing happens. My logo area is so small that you can’t read the tagline on my blog.

    1. Yes it does Lisa! You’re welcome to submit a support ticket and we can take a look for you.

  19. Lani and Lauren, I cannot seem to get this to work on my Delightful Pro Theme. My Logo seems very small and I would like to make it bigger. Any help would be appreciated.

Leave a Reply

Your email address will not be published.