Logo logo the right of Site Title

• 

  pvaneijck · Member · May 5, 2014 at 2:19 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I want my logo to the right of the site title (i.e. [Chaland] [logo]) and with the help of this forum I tried the follwoing CSS code

  .site-title {
  background: url(“http://pvaneijck.files.wordpress.com/2014/05/logo-chaland-origineel-wit-48px.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
  }

  .site-title a, .site-title a:hover {
  color: rgba(0, 0, 0, 0);
  }

  However this replaces the site title entirely. Is there a way to add the logo to the site title?

  Thanks

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

• 

  thesacredpath · Member · May 5, 2014 at 11:53 pm

  • Copy link

  Hi there, it looks like you have included your logo now in your site header, and it looks very good.

• 

  pvaneijck · Member · May 6, 2014 at 8:34 am

  • Copy link

  Thanks thesacredpath :)

  That’s how it looks now – but I want to get rid of the Header and put the Name + Logo in the Menu Bar.

  For now I’ve fixed it by making a .jpg logo using Pixlr (I work on a Chromebook) and it looks “all right” – except on mobile. On my cell phone it looks hideous.

  So I really “need” to put the logo next to the Site Text.

  Thanks in Advance.

• 

  thesacredpath · Member · May 7, 2014 at 10:12 pm

  • Copy link

  I’m seeing the title and the image now on the left above the sidebar area. Is that where you wanted it?

• 

  pvaneijck · Member · May 7, 2014 at 10:50 pm

  • Copy link

  Yes.

  I’ve now made a .png and put it there using the code from OP, but it looks amateurish, especially on a phone.

  I’m in over my head I guess.

• 

  thesacredpath · Member · May 8, 2014 at 4:48 am

  • Copy link

  Well, let’s see if we can get it looking the way you want it to look. What would you like to change about it?

• 

  pvaneijck · Member · May 8, 2014 at 2:42 pm

  • Copy link

  Thanks for your patience TSP :)

  I returned to “stock”. Now you can see the SIte Title in the Menu Bar.

  What I want is my logo next to the Site Title (it’s a .png). Just like the WordPress Logo & WordPress in the top of this site, but then [Title] [logo].

• 

  thesacredpath · Member · May 9, 2014 at 4:03 pm

  • Copy link

  Remove the existing site title stuff you have and paste in the following and see what you think. It uses the existing text-based site title and puts the logo to the right of it. What you will notice is that the header area is taller than it was, so there is a bit of the header area blue showing below the navigation and the search toggle icon.

• 

  thesacredpath · Member · May 9, 2014 at 4:17 pm

  • Copy link

  Oops, I forgot to post the code. :)

  .site-title {
      margin-top: 10px;
      margin-bottom: 10px;
  }
  .site-title a, .site-title a:hover {
      background: url("http://pvaneijck.files.wordpress.com/2014/05/logo-chaland-origineel-wit-48px.png") no-repeat scroll right top;
      padding-right: 55px;
      background-size: contain;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 120%;
  }
  .masthead-fixed .site-main {
      margin-top: 60px;
  }

  With the size of the existing site title text, keeping the logo at the size it comes in at seemed too small.

• 

  pvaneijck · Member · May 10, 2014 at 12:02 pm

  • Copy link

  Awesome!!

• 

  thesacredpath · Member · May 12, 2014 at 4:03 pm

  • Copy link

  Woohoo!