CSS coding for logo next to Header and Tagline

• 

  c1styourvoice · Member · Sep 30, 2016 at 6:53 pm

  • Copy link
  • Add topic to favorites

  Needing some CSS coding to add our logo to the left side of the header and tagline. When I currently add a logo it pushes everything else on the page down.

  Here is my blog: http://www.c1styourvoiceblog.com

  Any ideas?

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

• 

  c1styourvoice · Member · Sep 30, 2016 at 7:01 pm

  • Copy link

  I am using the Ippo theme if that helps!

• 

  technosoftconsultancies · Member · Oct 1, 2016 at 3:44 pm

  • Copy link

  Can you add the logo so we can see what’s needs to be fixed.

• 

  c1styourvoice · Member · Oct 3, 2016 at 1:04 pm

  • Copy link

  It has been added!

• 

  technosoftconsultancies · Member · Oct 3, 2016 at 9:39 pm

  • Copy link

  Hey,

  I have managed to get this done. But, you need to do some change in html ( if you can ) as it is important. In the header, you need to change the div structure with site-branding class to the following

  <div class="site-branding">
  		<!-- Display website logo -->
  		<div style="float: left; position: relative;max-width: 37px;">
  <a href="https://c1styourvoiceblog.com/" class="custom-logo-link" rel="home" itemprop="url"><img width="120" height="159" src="https://c1styourvoiceblog.files.wordpress.com/2016/09/cropped-cropped-your_voice_logo2.png" class="custom-logo" alt="cropped-cropped-your_voice_logo2.png" itemprop="logo">
  </a></div>
  
  <div style="float: right;">
  <h1 class="site-title"><a href="https://c1styourvoiceblog.com/" rel="home">Your Voice Blog</a></h1><p class="site-description">Blog powered by Community 1st Credit Union</p></div>
  </div>

  Let me know if this helps.

• 

  thesacredpath · Member · Oct 4, 2016 at 2:28 am

  • Copy link

  @technosoftconsultancies, we cannot edit the theme PHP script files here at WordPress.com.

  The differences between WordPress.com and WordPress.org.

• 

  thesacredpath · Member · Oct 4, 2016 at 2:30 am

  • Copy link

  @jessicam2013, give the following custom CSS a try. I’ve used a Media Query to limit this to 600px and wider screens since at widths narrower than that things go awry. At 599px and narrower things return to the original design.

  @media screen and (min-width: 600px) {
  	.site-title {
  		position: absolute;
  		top: 30px;
  		left: 200px;
  	}
  	.site-description {
  		position: absolute;
  		top: 65px;
  		left: 200px;
  	}
  }

  Let me know how things go and what you think with this.

• 

  c1styourvoice · Member · Oct 4, 2016 at 1:08 pm

  • Copy link

  @thesacredpath thank you so much! That works much better. Just one minor thing. Is there a way to put a little space in between the logo and the header/tagline?

  Thank you so much!

• 

  thesacredpath · Member · Oct 4, 2016 at 6:49 pm

  • Copy link

  You are welcome. I see you have changed the left values to get a bit more space. I do see a bit of overlap on the menu/description text, but it’s minor.

  I’ll mark this as resolved, but if you have additional questions, please let us know.