Move my logo

• 

  andersfys · Member · Nov 18, 2015 at 8:14 am

  • Copy link
  • Add topic to favorites

  Hey, I want to move my logo from the center to the left corner, Can anybody help?
  Regards

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

• 

  g471n · Member · Nov 18, 2015 at 9:06 am

  • Copy link

  Hi andersfys

  Try this custom CSS.

  .site-logo {
      text-align: left !important;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  You need to be on the WordPress.com Premium Plan for custom CSS to save.

• 

  andersfys · Member · Nov 18, 2015 at 12:00 pm

  • Copy link

  Thanks, It is now the left corner, but I want it a little down and the logo a little bigger so it is placed before the Headline/tekst in the top

• 

  g471n · Member · Nov 18, 2015 at 5:13 pm

  • Copy link

  Try this. I haven’t made the logo any bigger because it was causing problems when you resize the screen width.

  Let me know if this works for you.

  .site-logo img {
      position: absolute;
  }
  
  h2.site-title {
      padding-left: 2em;
  }

• 

  andersfys · Member · Nov 18, 2015 at 8:34 pm

  • Copy link

  Thanks, : ) But is it not possible to make the logo a little bit larger

  Regards Anders

• 

  g471n · Member · Nov 19, 2015 at 5:32 am

  • Copy link

  OK, try this.

  Replace the .site-logo img code I gave you earlier with:

  .site-logo img {
      position: absolute;
      max-height: 150px;
      height: 120px;
  }

• 

  andersfys · Member · Nov 19, 2015 at 8:09 am

  • Copy link

  Thanks : ) last question Is it possible to make the top “bar” where the logo and headline is placed at little higher so the text can be a little bigger?

  Regards

• 

  g471n · Member · Nov 19, 2015 at 4:06 pm

  • Copy link

  Here you go :)

  .site-title a, .site-title a:visited {
      font-size: 110%;
  }

• 

  andersfys · Member · Nov 19, 2015 at 5:46 pm

  • Copy link

  Thanks again… the hight is perfect now, but the is a little to big i want it placed in one line instead of two.. Can I make the text a bit smaller but still maintain the hight of the “box”

• 

  thesacredpath · Member · Nov 20, 2015 at 12:10 am

  • Copy link

  Hi, you can try the following. The first rule you have in your CSS, so just add the font size declaration to it and then add the second rule.

  h2.site-title {
      padding-left: 2em;
      font-size: 2.3em !important;
  }
  .site-header {
      padding-bottom: 60px;
  }

  The one thing to keep in mind is that it will show as one line when the browser window is wider than the max width of the overall parent div. Once someone narrows their browser window, or if someone has the browser window set narrower than the max width of your site, the site title will go back to multiple lines. At around 700px in window width, the image starts to overlay the end of your site title. My suggestion is to add the following at the bottom of your CSS which uses a Media Query to adjust things below 700px in width and centers the logo above the title.

  @media screen and (max-width: 700px) {
  	.site-logo img {
  		position: inherit;
  		max-height: 100px;
  	}
  	body:not(.has-header-social-menu) .site-logo {
  		text-align: center !important;
  	}
  	h2.site-title {
  		font-size: 1.5em !important;
  	}
  }

• 

  hzoeter · Member · Nov 22, 2015 at 1:42 pm

  • Copy link

  Hello, I would also like to see my logo at the left side, next to the site-title.
  I tried to use this topic to move my logo.
  However, when I copy and save the code examples to css nothing happens. Maybe because I use another theme with the logo in another box.
  How can I change this?

  My blog: rumahedifoundationnepal.org
  Theme: Lovecraft

• 

  g471n · Member · Nov 23, 2015 at 12:55 pm

  • Copy link

  Hello hzoeter

  CSS is different for each theme. This should work for you. Remove your line of custom CSS that reads:

  .site-title {
      padding-top: 5px;
  }

  and replace it with:

  .site-logo {
      float: left;
  }
  
  .site-title {
      display: inline-block;
  }

  To add custom CSS

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  Let me know if it needs any more tweaking.

• 

  hzoeter · Member · Nov 23, 2015 at 2:39 pm

  • Copy link

  Thank you g471n,
  Now I only need to get it from the side to just left of the title.

• 

  hzoeter · Member · Nov 24, 2015 at 10:41 am

  • Copy link

  I think I have worked it out for now, with some margin left and padding right. My (own) desktop view is correct and so is the mobile version. Only the the desktop view on mobile as well as on tablet are not the way it should be.
  If you have better ideas, your welcome.

• 

  arbindrml · Member · Nov 24, 2015 at 1:01 pm

  • Copy link

  Hello
  Can anybody help me with my logo, I can’t move it like I want.
  I want logo to be in line with pages on top.
  Sorry for my bad english.

  Site: http://test.hiteshqip.org/
  Theme: WPTube4

• 

  arbindrml · Member · Nov 24, 2015 at 1:06 pm

  • Copy link

  Demonstration:
  http://s22.postimg.org/tgxyy2o0x/untitled.png
  I made this with paint, to understand it.

• 

  thesacredpath · Member · Nov 26, 2015 at 1:24 am

  • Copy link

  @arbindrml, see my reply here: https://en.forums.wordpress.com/topic/logo-in-header-4?replies=2 .