16 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. 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?

  4. bob

    thanks for this page. helpful and works out of the box. Is there a way to make the logo scale with the page rather than display at a fixed size?

    1. Zeaks Post author

      You can use display: none for the searchform

      #branding #searchform { display: none; }

      Then following the last example, adjust your 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;
  5. 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 Post author

      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;
          height:65px; width:263px;
      1. lorenzocoffee

        Hi Zeaks!
        many thanks for detailed answer,
        but no luck on that side.
        Tricking with the header.php I’d stamped the ‘logo’
        on the top left, but far above the ‘actual site’
        may you give another shot please?

        many thanks

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap all code in [code] Your Code Here [/code] tags.

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge