Moving logo on the homepage of my blog

emilypshea · Member · Jan 30, 2017 at 10:37 pm
Copy link

Add topic to favorites
I added a logo to the heading of my page, and I don’t want it to sit on top of the title. I would like the logo to go to the right or left side of the title, and possibly be bigger.

I posted this earlier and I didn’t have any luck with the CSS code that someone gave me, so I’m not sure if I’m doing something wrong. Thank you!

The blog I need help with is: (visible only to logged in users)
nizamilputra · Member · Jan 31, 2017 at 3:29 am
Copy link
Hi there,

I think you are wrong to put the old css code. Try this code:
```
.site-logo-link{
  float: left;
  margin-right: 10px;
}
```
It’s ok to keep the old css.

Let me know if you need any help.
emilypshea · Member · Jan 31, 2017 at 4:46 am
Copy link
That worked! Thank you so much. Do you know what code I could use to make the logo slightly bigger?
emilypshea · Member · Jan 31, 2017 at 4:52 am
Copy link
Edit – how to make it bigger without having it lose its quality? It is a high quality image, but for some reason when I upload as I logo and then use CSS to make it bigger, its becoming blurry. Thank you!
nizamilputra · Member · Jan 31, 2017 at 4:56 am
Copy link
You can edit your custom css in .site-logo-link img part. Change height into auto and you can adjust the width property with whatever value that fit to your logo size.
```
.site-logo-link img{
    display: flex;
    float: left !important;
    height: auto !important;
    width: 125px;
}
```
nizamilputra · Member · Jan 31, 2017 at 5:03 am
Copy link
Yes it will make your logo blurry, because the theme script resize the image into small sizes (for certain screen resolutions). Unfortunately it can be done by css. Maybe you can ask the theme developer.

For now, you should let the theme handle image sizing if you want to make your logo not blurry instead of force resizing via css.
kathrynwp · Staff · Feb 2, 2017 at 4:12 pm
Copy link
emilypshea – let us know if you still need any help with this. As nizamilputra said, enlarging the logo with CSS can result in blurriness because it just blows up the smaller logo.

No items found.