Moving Site Logo

• 

  myprimrosehillkitchen · Member · Dec 10, 2016 at 2:52 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to move the Site Logo so that it appears between the Site Header and the Tagline.
  Can you please help us with the code needed in CSS?

  Thank you so much!

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

• 

  eallas · Member · Dec 12, 2016 at 2:54 pm

  • Copy link

  Hey aplotzi!

  This would be a change in the html coding rather than the css. The setup of the html is as follows:

  <a href="https://myprimrosehillkitchen.com/" class="site-logo-link" rel="home"><img width="300" height="102" src="https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=300" class="site-logo attachment-penscratch-site-logo" alt="whisk-illustration" data-size="penscratch-site-logo" srcset="https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=300 300w, https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=598 598w, https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=150 150w" sizes="(max-width: 300px) 100vw, 300px" /></a>
  
  <h1 class="site-title"><a href="https://myprimrosehillkitchen.com/" rel="home">my primrose hill kitchen</a></h1>
  
  <h2 class="site-description">the food blog for lazy cooks and avid food appreciators</h2>

  If you were to move the first part of the code (this image) in between the <h1> and <h2> you would have it in between the site header and tagline. Here’s what it should look like.

  <h1 class="site-title"><a href="https://myprimrosehillkitchen.com/" rel="home">my primrose hill kitchen</a></h1>
  <a href="https://myprimrosehillkitchen.com/" class="site-logo-link" rel="home"><img width="300" height="102" src="https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=300" class="site-logo attachment-penscratch-site-logo" alt="whisk-illustration" data-size="penscratch-site-logo" srcset="https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=300 300w, https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=598 598w, https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=150 150w" sizes="(max-width: 300px) 100vw, 300px" /></a>
  <h2 class="site-description">the food blog for lazy cooks and avid food appreciators</h2>

  I hope this helps.

• 

  thesacredpath · Member · Dec 14, 2016 at 6:21 pm

  • Copy link

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

  The differences between WordPress.com and WordPress.org.

• 

  thesacredpath · Member · Dec 14, 2016 at 6:29 pm

  • Copy link

  @aplotzi, moving the existing site logo would be problematic, but let’s try this. I’ve hidden the site logo and added the image as a background to the site title and adjusted the spacing. Give this a try and let me know what you think.

  @media screen and (min-width: 480px) {
  .site-branding .site-title {
    background-image: url('https://myprimrosehillkitchen.files.wordpress.com/2016/12/whisk-illustration.png?w=300');
    background-repeat: no-repeat;
    background-position: center 40px;
    padding-bottom: 100px;
  }
  .site-logo-link {
    display: none;
  }
  }

  In my testing, things go awry about 480px in width with the title overlapping the image, so I’ve used a Media Query to apply the above on screens/windows 480px and wider only.