Header Logo Positioning

Hi there,

To move the image up next to the site title, you can do something like this:

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

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

Centering it is kind of tricky, and doing it this way may break things if you're using a header widget or planning on putting your navigation in the header. If you're not doing either, you can do this:

body .inside-header.grid-container {
      display: inline-block;
      margin: 0 auto;
      max-width: 100%;
      width: auto;
      text-align: left;
}

.site-header {
      text-align:center;
}

Hope this helps.

Thank you for the prompt response. You Rock!

I added the this code to my custom css plugin:

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

.site-logo {
float: left;
margin-left: 10px;
}

body .inside-header.grid-container {
display: inline-block;
margin: 0 auto;
max-width: 100%;
width: auto;
text-align: left
}

.site-header {
text-align:left;
}

However, I still cannot seem to figure out how to vertically center the site-header text relative to the site-logo. I've tried a few things, but no luck. Any suggestions?

Can you send me a link so I can see what's happening? Either in here or to support@generatepress.com?

Thank!

Hi Tom,

Here's a link

I've played around with the code a little and also the padding in the customizer. Nothing I've tried would change the vertical position of the headline relative to the site logo.

Thanks again for all your help!

Katie

Oops, here's the real link: http://www.klslawoffice.com

Hmm, try going into the Customizer and set the Header to "Center" in the Layout section.

Center is checked and makes no changes if I uncheck it. It seems like whatever layout options I alter within this part of custom css, nothing changes.

body .inside-header.grid-container {
display: inline-block;
margin: 0 auto;
max-width: 100%;
width: auto;
text-align: left
}

Hmm - the code is saying it's not checked.

In your CSS, find the .site-header {text-align:center} entry and change it to this:

header.site-header {
      text-align: center;
}

Sorry I should have clarified. I changed that because I do want the site-logo and header to be positioned to the left.

header.site-header {
text-align: center;
}

Only changed the horizontal position instead of the two elements vertically relative to each other, as you will see now.

If it gets too complicated, no worries. I may be better off hiding the header text and creating an image with the logo and text I want. I suspect it will look better on mobile devices anyway and I would be able to easily position the image relative to any background image I use.

K

Ah sorry - I was completely misunderstanding.

To move the site title down so it's vertically aligned with the logo, you could do this:

.site-branding {
      margin-top: 30px;
}

Got it. Thank you!.

You're welcome - sorry for the confusion!

Hi tom,

Could you tell me how to make the tagline below the Logo? Now I hide the site Title.

Thanks!

Hi there,

This should help: http://generatepress.com/forums/topic/moving-site-tagline-below-logo/