Company logo displayed in header of Harmonic title

• 

  jennybluegrass · Member · Jun 23, 2016 at 2:02 am

  • Copy link
  • Add topic to favorites

  Hello

  Help please!

  I’d like to insert our company logo into the header of the Harmonic theme. I’ve uploaded the logo into the customizing section however the header only displays the site title text.

  I’ve also kept my homepage on the default page template rather than the homepage template as I do not want any text to display over the homepage image. I’m really keen to keep this page clean and not have any text on it whatsoever.

  Any advice you can provide will be greatly appreciated.
  Cheers
  Jen

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

• 

  thesacredpath · Member · Jun 23, 2016 at 3:49 am

  • Copy link

  Hi Jen, the Site Logo will only show on the home page template from what I can see, but let’s try the following and see what you think, and then go from there. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .home .hsContainer {
      background-image: url("https://bluegrasscomau.files.wordpress.com/2016/06/full-logo-final-white.gif");
      background-repeat: no-repeat;
      background-position: 30px 50px;
      background-size: 280px auto;
  }

  Make sure and check things in a phone and tablet if you can. It appears everything works well on my end, but check just to make sure.

• 

  jennybluegrass · Member · Jun 23, 2016 at 5:18 am

  • Copy link

  Thank you so much for your help, that’s wonderful and yes it worked!

  Is it possible to insert the logo in the menu bar section – the black strip running across the page – apologies I’m not sure if I’m using the correct description for that section?

  At the moment ‘Bluegrass’ is just written, and I would love to put a logo there instead of the written text. That way the logo would also appear on the other web pages.

  Thanks again for your help, it’s greatly appreciated.
  Cheers
  Jen

• 

  thesacredpath · Member · Jun 23, 2016 at 6:24 pm

  • Copy link

  Jen, we can do that. Replace what I had given you with the following. It hides the existing site title and keeps the image as clickable to return to the home page.

  h1.site-title {
      background-image: url("https://bluegrasscomau.files.wordpress.com/2016/06/full-logo-final-white.gif");
      background-position: left center;
      background-repeat: no-repeat;
      background-size: contain;
      display: block;
      height: 25px;
      margin: 20px 0 10px;
      width: 150px;
  }
  h1.site-title a {
      color: rgba(0, 0, 0, 0) !important;
      display: block;
      line-height: 2;
  }

• 

  jennybluegrass · Member · Jun 23, 2016 at 10:31 pm

  • Copy link

  you’re an absolute superstar! thank you so much.

• 

  thesacredpath · Member · Jun 24, 2016 at 2:34 am

  • Copy link

  You are welcome.

• 

  adotrdot · Member · Jun 25, 2016 at 4:58 pm

  • Copy link

  Hi!

  I have the same issue. I used the code above, but the social media icons are too far over from the logo now. (I’m aware that the logo has a watermark, I’m just doing a test to see the fit.)

  I hope you can help me.

  Also, I want to put soundcloud above the tagline (#GoFarAR). Is that possible? Or anywhere on the front page not covering his body or the tagline.
  Hope to hear back!

  adotrdot.com

  Summer

• 

  adotrdot · Member · Jun 25, 2016 at 5:48 pm

  • Copy link

  Well actually I want it placed on the left side of the page

• 

  thesacredpath · Member · Jun 25, 2016 at 7:53 pm

  • Copy link

  @adotrdot, the code I gave above was specifically for @jennybluegrass’s site and logo. Looking at your custom CSS, you have the link to the image on your computer and the WordPress software cannot access that image. You have to upload it to your site Media Library and then get the URL of that uploaded image on use it in the background-image declaration. You may need to make adjustments to the margins, height, and possibly the width to accommodate your logo and get the spacing you desire.

• 

  adotrdot · Member · Jun 25, 2016 at 9:01 pm

  • Copy link

  I did that and it appeared when i put the link in, but once I closed it out, I don’t see it anymore.

  Also, can I embed the soundcloud playlist on the frontpage, on the image?

• 

  adotrdot · Member · Jun 25, 2016 at 9:03 pm

  • Copy link

  @thesacredpath it’s showing up now, but when I adjust the numbers, it resizes the logo but doesn’t move the social media icons closer

• 

  thesacredpath · Member · Jun 27, 2016 at 10:32 pm

  • Copy link

  @adotrdot, find this rule in your custom CSS
  h1.site-title
  and change the width value to 80px.

• 

  adotrdot · Member · Jun 28, 2016 at 12:10 am

  • Copy link

  @thesacredpath I think it adjusted it. Thanks. Also, regarding the soundcloud, is there a way I can put that on the front page?

• 

  thesacredpath · Member · Jun 28, 2016 at 9:49 pm

  • Copy link

  Right now you have the front page widgets section were the SoundCloud is hidden. Go to Customize > Theme Options > Visibility and uncheck “Hide Widgets Section” and save. That will bring the widgets section back.

• 

  adotrdot · Member · Jun 30, 2016 at 12:24 am

  • Copy link

  @thesacredpath Okay, thanks for your help! Last question, is there any fix for the social media icons not showing up on the mobile view?

• 

  thesacredpath · Member · Jun 30, 2016 at 3:07 am

  • Copy link

  Hmmm, this is an interesting design. There are two bands for the top, one for about 1024px wide, and one for less than that (mobile). I can bring the other one for wider screens back, but as of yet haven’t figured out how to make the individual elements disappear so that I can move the icons up into the mobile band.