How to make a logo appear to the left of the header site text and tagline

I would like to make the logo adopt to size of the header, but not put it below the header.

Hm, I played around a bit, and i got this:

.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
height: 128px;
width: 128px;
}

But now the image has a distance from the borders of the header (white part) adn i dont like that. id like to have the logo all over the header in height. is that achievable?

I really love GeneratePress. :D

i guess else i gotta put the logo inside a header png and put that one up.

But now the image has a distance from the borders of the header (white part) adn i dont like that. id like to have the logo all over the header in height. is that achievable?

I'm not too sure what you mean by that.

Any examples?

I don't have any examples. what i mean is the top and bottom border of the logo. i think its the padding. can i expand the logo even over the padding without the site title to lose the vertical centering? i mean it should loook like this
_____________________________________________
| LOGO
| LOGO SITE TITLE & SITE TAGLINE
| LOGO
---------------------------------------------
|
|

Where as the logo shouldnt need to be only a few pixel big without resizing the header. And I mean LOGO is just 1 Logo not the logo repeated or anything.

Is this clearer?

Thank you!

freaky.

Not sure I'm completely clear..

You can reduce the padding on top and bottom of the header in "Customize > Layout > Header".

Then upload your logo at whatever size.

To vertically center the site title to the logo, you can do something like this:

@media (min-width: 769px) {
    .site-branding {
        margin-top: 20px;
    }
}

Adjust the 20px as needed.

ok thanks. can i also somehow center the logo between the left navigation bar? so its above the middle of the left navigation bar?

thanks !!

I'm not sure what you mean? Examples always help :)

_____________________

| <-- this centered in the middle above
_____________________

| | <-- this bar
| |
| |
| |
| |
| |

I tried margin-left: 40px; it looks like its int he middle now though.

oh it doesnt keep spaces. :( well i dont know if theres any better way than margin-left: 40px of the site-logo css.

I'm afraid I'd actually have to see it on a website to know exactly what you mean.

If you have any example sites let me know and I should be able to help =)

the site is http://teamunity.unityhub.eu

I did this now:

.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
margin-left: 40px;
height: 192px;
width: 192px;
}

@media (min-width: 769px) {
.site-branding {
margin-top: 40px;
}
}