How to add right aligned logo to masthead

  • Resolved kintopp

    (@kintopp)


    11 years, 4 months ago

    I’m trying to add a 52×52 image (top of site title to bottom of the site’s description) on the right edge of the masthead. In other words, much like the effect produced by this childtheme code I found in the forum, but 52×52 and on the right side of the masthead instead:

    #masthead hgroup { position: relative; }
#masthead hgroup:before {
    content: url("https://dummyimage.com/72x72/39de33/0011ff.png");
	display: block;
	width: 72px;
	height: 72px;
	position: absolute;
}
.site-title, .site-description { padding-left: 96px; }

    I haven’t been able to find a previous post that addressed this.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Do you have a child theme set up? That’s the first step in modifying the header.php file.

    https://codex.www.ads-software.com/Child_Themes

    Then post a link to your site with also a link to the image (in your media library) you want to put in that location.

    Thread Starter kintopp

    (@kintopp)

    Thank you for the very quick response.

    With the help of a friend, I’ve now got a solution that’s almost accomplishes what I had in mind. In the child theme / custom css area we added:

    #masthead hgroup {
	background-image: url("https://kanjialive.com/wp-content/uploads/2013/10/fan_logo_104.png");
	background-position: right center;
	background-size: 52px 52px;
	background-repeat: no-repeat;
}

    This centers the logo vertically in hgroup and would be perfect if the logo were 72×72. However, what I’d ideally like is for the logo to be placed so that its top aligns with the dot on the “j” in Kanji alive and the bottom aligns with the baseline of the site description. That height corresponds approximately 52px. Here’s a mock-up to better illustrate this: https://dl.dropboxusercontent.com/u/1667511/site-logo.png

    I’d need to see the actual site to help more with something like this.

    Thread Starter kintopp

    (@kintopp)

    Sorry, I should have been more explicit. The site was referenced obliquely through the code example above. It’s https://kanjialive.com.

    Thread Starter kintopp

    (@kintopp)

    I think I’m going to just employ a simple graphical workaround to get this done: create a 72px high white background and then overlay my 52px high logo onto it appropriately. Then save that as a PNG for use on the site.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add right aligned logo to masthead’ is closed to new replies.