Add a Logo to the Header

• 

  aselynn · Member · Feb 26, 2014 at 4:50 am

  • Copy link
  • Add topic to favorites

  I’d like to add a logo to our header through CSS, instead of just having it in the right-hand widget column on each page. (In the tablet/mobile versions of the site, you don’t see the logo at all until the bottom of the page, and that just doesn’t work for me.)

  Yes, I could edit the header image in Photoshop and put the logo in on top, but I’d rather do it through CSS as an element on the page.

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 27, 2014 at 6:17 pm

  • Copy link

  Hi, this can be done pretty easily. To make the logo readable at smart phone sizes and be fully visible, you need to create one of the following. For replacing the site title and the tagline/description, 275px wide by 175px tall. For replacing the site title only, 275px wide by 140px tall. Create it as a PNG image with no background color (transparent) and then upload that to your media library. I suggest cropping the images tightly. Get the URL of that image and then replace URL_OF_IMAGE between the quote marks in the appropriated code below and paste the code into your custom CSS edit window at Appearance > Customize > CSS (delete all the informational text in that window).

  For replacing the title only (this hides the existing text title also):

  .site-title {
      background: url("URL_OF_IMAGE") no-repeat scroll left bottom rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0);
      height: 170px;
      width: 275px;
  }

  For replacing the text title and tagline/description (this hides the existing title and tagline also):

  .site-title {
      background: url("URL_OF_IMAGE") no-repeat scroll left bottom rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0);
      height: 205px;
      width: 275px;
  }
  
  .site-description {
  display: none;
  }