Move Site Logo

hohcatholic · Member · Mar 14, 2015 at 6:29 pm
Copy link

Add topic to favorites
Hello,

I need to move the logo for the site to the left side of the header. What is the CSS to re-position the logo in the header?

Thanks

The blog I need help with is: (visible only to logged in users)
jami0821 · Member · Mar 15, 2015 at 10:41 pm
Copy link
Applying the following CSS will float the logo image to the left in the header area:
```
.masthead .site-logo-link img {
    float: left;
}
```
hohcatholic · Member · Mar 16, 2015 at 10:49 pm
Copy link
I tried that CSS but it didn’t seem to work. Do I need to add the image url?
thesacredpath · Member · Mar 17, 2015 at 8:39 pm
Copy link
The logo is in the same parent div as the site title and tagline, so we need to reduce the padding on the left of that parent div to get your logo to the left top corner of the header image, and then add that same amount of padding to the left of the title and tagline so they remain centered in the header image.
```
.masthead .branding {
    padding-left: 65px;
}
.logo, .description {
    padding-left: 75px;
}
```
See what you think and let us know.
hohcatholic · Member · Mar 18, 2015 at 2:45 am
Copy link
It’s now in the right spot. I’d now just like to make the logo larger. Can I edit the size of the logo?
thesacredpath · Member · Mar 18, 2015 at 3:04 am
Copy link
We can use a transform to make it larger, but there are limits on this due to image quality reductions. You can play with the value and then you will probably need to play with the positioning of it.
```
img.site-logo {
    transform: scale(1.25);
}
```
hohcatholic · Member · Mar 18, 2015 at 3:29 am
Copy link
It works! Thanks a bunch!
thesacredpath · Member · Mar 18, 2015 at 2:12 pm
Copy link
You are welcome.

No items found.