How to add a logo to Twenty Eleven Theme

I’ve seen this asked alot so, here’s how you can add a logo image to the header area of Twenty Eleven theme by only adding CSS to your theme. It’s not the best way to add a log in all cases but it works pretty well for Twenty Eleven theme.

Well be using a 263x65px logo in the example, you can use this one if you want to try it out. Place it in a folder called images within your child theme.

logo

We won’t be touching any template files, only using CSS to add the logo.

This will indent the title and replace it with the logo. The title is still on the page, just out of view.

/* logo over title */
#site-title a {
    background: url('images/logo.png') left top;
    background-repeat: no-repeat;
    display:block;
    text-indent:-9999px;
    height:65px; width:263px;
}

This will place the logo below the site title

/* Logo below site title */
#site-title a {
    background: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: 0 40px;
    display: block;
    height: 110px;
    width: 263px;
} 

This one will place the logo above the site title.

/* logo above site title */
#site-title a {
    background: url('images/logo.png');
    background-repeat: no-repeat;
    display: block;
    height: 65px;
    line-height: 160px;
    margin-bottom: 30px;
    width: 263px;
}

This last one will place the logo in the header area, but to the right, and above the search form. We’ll also need to move the search form down slightly. If you want, you can hide the search form too.

/* Logo above searchform */
#branding #searchform {top: 4.8em;} /* moves search down slightly */
#branding hgroup {
    background: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: 100% 0px;
	
}

It’s pretty easy to do, but I see alot of people asking how to do it. There are other ways to do this, but I didn’t want to edit any template files, and just use CSS.

Also remember, this won’t work when using a custom CSS plugin, such as the one included in NomNom theme options. The image path is relative to the stylesheet so the url for the image doesn’t direct properly unless you link it using the entire http address.

34 thoughts on “How to add a logo to Twenty Eleven Theme

  1. Johanna

    Great post! Could you please also explain how to add a logo left of the title (so how to move the title and tag line right of the logo)? Please also tell us where in the header.php we have to add this code. Thanks much!!

      1. Zeaks

        This is added to the CSS not header.php. You should be able to reduce the text indent enough to leave room for your image Example

        #site-title a {
            background: url("images/logo.png") left top;
            background-repeat: no-repeat;
            display:block;
            text-indent: 75px;
            height:65px; width:263px;
        }

        Use the same text indent for the site description.

      1. lill

        I wanna have it at the above of the entire site wrapper. Also, give it some space between the top baseline and the header. So-so gap. Because the one that you had give me (TOP LEFT at searchform) really attach to the line. I hope you can prepare a FLEXIBLE code for the logo.

  2. Pingback: 如何给Twenty Eleven主题添加一个Logo

  3. Kylie

    Hi there – thanks so much for this!!
    How do I get the logo to sit hard against the white wall at the top and left so there is no white space above the logo and no white space to the left of the logo?

      1. Rudolph Pretorius

        Thanks! Got rid of the search box, but somehow I couldn’t get your code to display my logo.

        I found the following code did the trick ;)

        #branding {
        border-top: 2px solid #bbb;
        padding-bottom: 10px;
        position: relative;
        z-index: 2;
        background: #eee url(http://www.path-to-image) no-repeat;background-position: 100% 0px;
        }
  4. lorenzocoffee

    Hi Zeaks
    Hi all.
    my ‘request’ is slighty different that the above examples / possibilities.
    My site header it’s all image (http://1agy.eu -test site-) so to speak.
    and I’d like to place the logo Over the images (floating?)
    without to encase or paste it on the graphic images.
    Would this be possible?

    Many thanks for the provided NomNom theme.

    1. Zeaks

      Your site title and description are still there, remove the clip and use the first example.

      #site-title a {
          background: url('images/logo.png') left top;
          background-repeat: no-repeat;
          display:block;
          text-indent:-9999px;
          height:65px; width:263px;
      }
  5. AndyL

    Hi
    Thanks for the advice on this post, which I have used to get a logo top right on a development site in Twenty Plus Lite. It looks just as I want in normal browsers. However on a mobile phone size device the header text is centred and overlaps the logo.
    Is there any way of resizing and positoining the logo for a mobile phone, for instance under the header text? Failing that, can the logo be removed entirely on a mobile phone only?
    The logo is taller than the normal space for the header text, so I experimented with height in px or rem to get enough space. This doesn’t seem to make a difference.
    This is the CSS code I have used

    hgroup {
    	background: url('http://test.marlowredkiteride.co.uk/wp-content/uploads/2013/01/kite2.png');
    background-repeat: no-repeat;
    background-position: top right;
    height:12rem; 
    }
    

    My site is test.marlowredkiteride.co.uk

    1. Zeaks

      Hi Andy. Twenty Twelve theme is a “Mobile First” theme, this means it was designed to look good on mobile devices, then by the use of @media queries was designed for desktops.

      The logo code in this post (designed for twenty eleven) is not placed within media queries. If you take a look at this article http://zeaks.org/tutorials/twenty-twelve-theme-three-column-layout/ and search for “Three Column Twenty Twelve Styles” I explain it in more detail.

      It’s basically a way of separating mobile styling from normal desktop styling. Once you’ve added the logo code inside @media tags, you can then add it as normal, but alter it so it works for mobile. (resize the browser, edit it in firebug)

      I might update this post to also include Twenty Twelve. The mobile first layout can be confusing.

  6. AndyL

    Thanks Zeaks, that works nicely.
    Just one remaining question though: Is there a way to make the logo rescale as the screen gets smaller? If not, I guess I can use two or three different size logo images and use the conditions to switch between them.
    For anyone looking at this, here’s the CSS code I am using. The logo is on the right on desktops and central on devices less than 600px wide. The height number is driven by the size of the logo.

    hgroup {
    	background: url('http://test.marlowredkiteride.co.uk/wp-content/uploads/2013/01/kite2.png');
            background-repeat: no-repeat;
            background-position: bottom center;
            height:17rem; 
    }
    
    @media screen and (min-width: 600px) { 
        hgroup {
    	background: url('http://test.marlowredkiteride.co.uk/wp-content/uploads/2013/01/kite2.png');
            background-repeat: no-repeat;
            background-position: top right;
            height:12rem; 
            }
            .main-navigation {
                    margin-top: 0.71429rem;
            }
    }
    
  7. stof77

    Hi Zeaks thanks for sharing this,

    though I have a problem if use the “logo over title” code,

    I think it’s because I have done a few modification myself with css child theme file (twenty eleven), so I was thinking to use a specific ID for my logo image but I feel a bit lost on how to achieve that, I guess I’ll have to modify the header.php,

    could you give me some help on this ?

    1. Zeaks

      I’d have to see your site if you’ve changed it. Basically you’re setting a background image on the site title, then using a text-indent to push the title text to the side far enough so it’s out of site. You may need to adjust the margins depending on what you’ve done with the header.

  8. pegrana

    hello , I dont know where write it
    is it here?
    /* =Header
    ———————————————– */

    #branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
    }

    1. Zeaks

      Looks like you figured it out ( .home .logo ) but for anyone else that has this issue. Use firebug to find the class your site title uses it may be different than what twenty Eleven uses. replace #site-title with the class from your theme.

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*