Insert logo in header – Twenty Eleven

  • Hello hello!

    I have been trying to insert a logo in the header section of my modified Twenty Eleven (www.oneearth.iamaleksandra.com). I found this but it doesn’t work:

    /* Logo above searchform */
    #branding hgroup {
    background: url(‘https://oneearth.iamaleksandra.com/wp-content/uploads/2013/05/One-Earth-Logo.png’);
    background-repeat: no-repeat;
    background-position: 100% 0px;
    }

    Any help would be appreciated. I am trying to have the logo displayed to the right (or left even better) within the dark blue header image. Obviously when I have made the logo part of the image (e..g. designed the header with the logo in it) the logo is not dynamic and it doesn’t adjust properly to different screen sizes/ resolutions.

    Thanks tonnes!

    PS. I am a newbie and my child theme code might look messy – don’t be horrified ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding a height to your hgroup element because there’s nothing inside it.

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Sure Andrew, I can try that – but how? Sorry I am pretty new so maybe an example?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    See CSS height:

    /* Logo above searchform */
#branding hgroup {
 background: url('https://oneearth.iamaleksandra.com/wp-content/uploads/2013/05/One-Earth-Logo.png');
 background-repeat: no-repeat;
 background-position: 100% 0px;

 /* Height */
 height: 339px;
}

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Hmmm – don’t work. The CSS height link seems broken too. Thanks for the help I really appreciate it. Let me know if any other ideas come to mind.

    Aleksa

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I am surprised that W3schools broke their little section of the Web.
    Try this link instead: https://www.w3schools.com/cssref/pr_dim_height.asp

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Btw you added it wrongly:

    /* Logo above searchform */
#branding hgroup {
background: url('https://oneearth.iamaleksandra.com/wp-content/uploads/2013/05/One-Earth-Logo.png');
background-repeat: no-repeat;
background-position: 100% 0px;
}

/* Height */
height: 482px;
}

    Spot the difference.

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    So I added this – and nothing shows. Where is the mistake, in the height px?

    /* Logo above searchform */
#branding hgroup {
background: url('https://oneearth.iamaleksandra.com/wp-content/uploads/2013/05/One-Earth-Logo.png');
background-repeat: no-repeat;
background-position: 100% 0px;
}

/* Height */
height: 339px;
}

    Should it be:

    /* Logo above searchform */
#branding hgroup {
background: url('https://oneearth.iamaleksandra.com/wp-content/uploads/2013/05/One-Earth-Logo.png');
background-repeat: no-repeat;
background-position: 100% 0px;
height: 339px;
}

    Tnx.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The mistake is that you closed off the bracket, so the height does not apply to the hgroup element.

    Should it be:

    Yes.

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Okay so that kind of worked…halfway there. If you spot now you will see that the logo appears above the blue header image. I was hoping to put it on top of it as in front of the header image.

    Thoughts?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try adding:

    #branding img {
 position: absolute;
 top: 0;
 z-index: -1;
}

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Okay, so I think I will have to revise my whole approach to this problem. I think i will start another topic and add a wrapper instead and then add a logo…thanks for the help thus far!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Insert logo in header – Twenty Eleven’ is closed to new replies.