Changing the maximum logo size

jodiegray82 · Member · Oct 15, 2013 at 2:19 pm
Copy link

Add topic to favorites
I would like to change the maixmum logo size in my Organization theme blog. The current maximum size is 420 x 120 px, but this is too small for me.

I have the CSS custom design add-on.

Any help is greatly apprecited.

The blog I need help with is: (visible only to logged in users)
mrdirby · Member · Oct 15, 2013 at 2:55 pm
Copy link
This will make the logo fill the whole space up to the search bar, 720 pixels.
```
#custom-header img {
width:100%;
}
```
When the site loads on smaller screens the logo will be wider than the screen. It actually looks like there isn’t responsive code for the custom logo. Which is probably why it is forced to 420 in the first place.
thesacredpath · Member · Oct 15, 2013 at 3:04 pm
Copy link
What you can do, is create your logo at the size you want it and then insert it directly into the CSS instead of using the customizer (remove the logo there). You would then use the following code and edit as needed. Upload your new image to your media library, get the URL of that image, and then replace URL_OF_IMAGE between the quote marks with your URL. The line-height and width set in the second rule, and the “height in the first rule, should match the width and height of your image.
```
#header #masthead {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 100px;
}

#masthead .site-title a {
    display: block;
    line-height: 100px;
    text-indent: -9999px;
    width: 650px;
}
```
You can see an example on my test site at: http://flippintestblog.com/
thesacredpath · Member · Oct 15, 2013 at 3:11 pm
Copy link
Try @mrdirby’s solution first and see what you think as it would be the most simply. The image will lose quality since the smaller image will be enlarged by the browser.

@mrdirby reminded me that I had forgotten to include a background size declaration to allow the image to resize properly when the browser window is narrowed or on smart phones or tablets. Use the following instead.
```
#header #masthead {
    background: url("http://flippintestblog.files.wordpress.com/2013/10/org-logo-650-100.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    max-height: 100px;
    background-size: contain;
}

#masthead .site-title a {
    display: block;
    line-height: 100px;
    text-indent: -9999px;
    width: 100%;
}
```
@mrdirby, thanks for reminding me. :)
jodiegray82 · Member · Oct 15, 2013 at 3:36 pm
Copy link
Thank you @thesacredpath – that worked really well. My only problem now is that my tagline (which I’ve temporarily removed) now overlaps the image below. How can I create more space between the logo and the image?
mrdirby · Member · Oct 15, 2013 at 3:38 pm
Copy link
@thesacredpath No problem. I was thinking about how to adjust with media rules but this is much simpler.

@jodiegray82 I see you have it implemented. Looks good.
thesacredpath · Member · Oct 15, 2013 at 3:49 pm
Copy link
Definitely looks good. The background-size CSS3 declaration is really exciting and I’m glad to see it show up.
jodiegray82 · Member · Oct 15, 2013 at 4:08 pm
Copy link
Hi @thesacredpath…I’ve added a tag line to the blog so you can see what the problem is…

Any ideas how to resolve this?

Many thanks!
mrdirby · Member · Oct 15, 2013 at 4:10 pm
Copy link
Try adding more space to the bottom margin.
```
#header .site-description {
margin: 0px 0px 35px 0px;
}
```
You can increase 35 if you want more room.
jodiegray82 · Member · Oct 15, 2013 at 4:17 pm
Copy link
Thanks @mrdirby – I tried that but it didn’t seem to have any effect…any other solutions?

Your help is much appreciated!
thesacredpath · Member · Oct 15, 2013 at 5:57 pm
Copy link
Add the following and see what you think.
```
#header {
    margin-bottom: 20px;
}

#navigation {
    top: 50px;
}
```
jodiegray82 · Member · Oct 15, 2013 at 6:01 pm
Copy link
Perfect! Thank you so much!
thesacredpath · Member · Oct 15, 2013 at 8:30 pm
Copy link
You are welcome.

No items found.