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

[Uwe Pfeifer]

Hi. How can I make a logo appear to the left of the site tag line and website header title?

http://teamunity.unityhub.eu

[Uwe Pfeifer]

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

[Uwe Pfeifer]

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?

[Uwe Pfeifer]

I really love GeneratePress. 😀

[Uwe Pfeifer]

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

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Uwe Pfeifer]

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.

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Uwe Pfeifer]

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 !!

[Tom]

I’m not sure what you mean? Examples always help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Uwe Pfeifer]

_____________________

| <– this centered in the middle above
_____________________

| | <– this bar
| |
| |
| |
| |
| |

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

[Uwe Pfeifer]

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

[Tom]

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 =)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Uwe Pfeifer]

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

[Uwe Pfeifer]

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;
}
}

[Author]

Posts