[Resolved] Header Logo Positioning

[Katherine Scholl]

Hi Tom,

Thanks for the great theme and all the plugins! I’m new to wordpress. I have activated all of your plugins as well as the custom CSS plugin you recommend, but I still can’t seem to figure out how to change the header and logo positioning.

If you could please let me know how best to place my logo to the left of the site title (instead of below) and have both the logo and site title left justified and centered vertically on the header.

Thanks for your help!
Katie

[Tom]

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.

[Katherine Scholl]

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?

[Tom]

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

Thank!

[Katherine Scholl]

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

[Katherine Scholl]

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

[Tom]

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

[Katherine Scholl]

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
}

[Tom]

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

[Katherine Scholl]

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

[Tom]

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

[Katherine Scholl]

Got it. Thank you!.

[Tom]

You’re welcome – sorry for the confusion!

[siyuanxing9132gmail-com]

Hi tom,

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

Thanks!

[Tom]

Hi there,

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

[Author]

Posts