[Resolved] Header logo

[Peter]

Hello, I have a child theme to GP called Freelancer. I’ve added a logo to the header using the theme’s controls, but I would like to position the logo from its default position below the header text to the right of the text. How do I go about doing this?

[Tom]

Hi there,

Try this CSS:

.site-logo,
.site-branding {
      display: inline-block;
      vertical-align: middle;
}

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

[Alison]

Hi Tom,

I’m also trying to do the same thing as the original poster. I added the CSS you gave to the child theme, but it didn’t change anything. I also tried adding it via a custom CSS plugin (in case that is actually where it is supposed to go…), but it still didn’t do anything. Should I be doing something else?

Thanks for the help.

[Tom]

Can you link me to the site you’re using that CSS on so I can make sure it’s been added correctly?

Thanks! 🙂

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

[Alison]

Sure thing, it is http://nifti.washington.edu/. For good measure, I added the CSS to both the child theme and the custom CSS plugin.

Thanks for the help!

[Peter]

Hey Tom, that worked. Thank you!

Now, how do I move the logo to the right of the page?

[Peter]

wordraft.com

[Tom]

@Alison, it’s not working for you because your site title is super long – there’s no room for the logo to sit next to it.

@Peter, if you want the logo to the far right, you can replace the CSS with this:

.site-branding {
      display: inline-block;
      vertical-align: middle;
}

.site-logo {
      float: right;
}

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

[Peter McMinn]

Very much appreciated. Thanks Tom!

[Tom]

You’re welcome 🙂

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

[Alison]

Ah, that makes sense. I thought that perhaps the text in the title would wrap.

I’m actually aiming for what Peter was also doing – having the logo to the far right. Is there a way I can force the text of the title to wrap? I tried including a <br> in the title, but it just printed that along with the rest of the title.

Thanks for the assistance!

[Tom]

Hmm, you could always reduce the text size of your site title?

You could also try something like this:

.site-branding {
      max-width: 70%;
}

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

[Alison]

That new CSS worked perfectly!

Thank you for your help!

[Tom]

You’re welcome 🙂

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

[Jamie]

Is there a way to flip the Title and Logo positions? I know I can move the logo to the left or right of the title, but would like to see it above. Help! =)
westsidemutual.com

[Author]

Posts