Title: Logo "Overlapping" Header
Last modified: August 21, 2016

---

# Logo "Overlapping" Header

 *  Resolved [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/)
 * Hey folks,
 * I’d like to have my site’s logo “overlapping” the header image and menu bar. 
   Basically, I’d like it to be the “top” object on the page.
 * At the moment I have this CSS;
 *     ```
       .site-title a {
       	background: url('http://soniccollectors.com/wp-content/uploads/2013/09/Logo_500.png') -80px 0 no-repeat;
       	width: 500px;
       	height: 107px;
       	text-indent: -9999px;
       }
       ```
   
 * While this puts the logo over the header image, when I try to move it to where
   I want, part of the image is cut off, as you can see on the left of it. I’m assuming
   this is because the area that the image is in doesn’t extend as far as I want
   to position the logo. I tried extending the size of the area, but it extends 
   right, not left, seemingly not wanting to go past that point. I also tried using
   padding and overflow, but with no luck.
 * I’d like the final product to look like [THIS](http://www.flickr.com/photos/joemd/9870222576/).
   If anyone has any suggestions I’d greatly appreciate it.
 * Cheers.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151517)
 * Could you link to a page with the issue?
 *  Thread Starter [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151518)
 * Ah, bugger. Sorry, I always forget to post a link. Here you go.
 * [http://soniccollectors.com/](http://soniccollectors.com/)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151520)
 * > when I try to move it to where I want
 * What CSS are you using for this?
 *  Thread Starter [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151526)
 * it’s quoted above. I used the -80px to try to move it left.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151527)
 * You’re using `text-indent: -80px` to move the image to the left?
 *  Thread Starter [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151532)
 * No, just the part in bold below –
 *     ```
       .site-title a {
       	background: url('http://soniccollectors.com/wp-content/uploads/2013/09/Logo_500.png') <strong>-80px</strong> 0 no-repeat;
       	width: 500px;
       	height: 107px;
       	text-indent: -9999px;
       }
       ```
   
 *  Thread Starter [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151533)
 * Ooops, that didn’t work, sorry.
 * .site-title a {
    background: url(‘[http://soniccollectors.com/wp-content/uploads/2013/09/Logo_500.png&#8217](http://soniccollectors.com/wp-content/uploads/2013/09/Logo_500.png&#8217);)**-
   80px** 0 no-repeat; width: 500px; height: 107px; text-indent: -9999px; }
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151536)
 * Move the anchor tag using CSS positioning, e.g;
 *     ```
       .site-title a {
        position: relative;
        left: -128px;
       }
       ```
   
 * _[http://www.w3schools.com/css/css\_positioning.asp](http://www.w3schools.com/css/css_positioning.asp)_
 *  Thread Starter [JoeMD](https://wordpress.org/support/users/joemd/)
 * (@joemd)
 * [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151537)
 * Worked wonderfully. Thanks very much!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Logo "Overlapping" Header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/expound/2.0.1/screenshot.png)
 * Expound
 * [Support Threads](https://wordpress.org/support/theme/expound/)
 * [Active Topics](https://wordpress.org/support/theme/expound/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/expound/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/expound/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [JoeMD](https://wordpress.org/support/users/joemd/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/logo-overlapping-header/#post-4151537)
 * Status: resolved