[Resolved] Position of the header logo

[Joe]

Hi, i would like to put the logo before the site title at left hand side, the logo shown below the title, how to fix that? thanks

[Tom]

Hi there,

Sorry for not getting back to you sooner.

I need to make some changes in the header file to allow people to sort which element should come first between the header widget, site title/tagline and logo. Will be looking to do this ASAP.

Do you possibly have the GP Hooks add-on? If so, I can give you some simple code to use in there to display the logo to the left of the title.

If not, I can give you a little more code which you can add to your child theme which will accomplish this.

Let me know 🙂

[Joe]

Hi Tom,

I do not have GP Hooks add on, I would appreciate if you can let me have the code so I can paste into the functions.php or style.css of the child theme.

Thanks

[Tom]

Here we go:

1. Go to “Appearance > Customize > Header Content” and remove your logo.

2. Paste this into your child theme’s functions.php file:

add_action('generate_before_header_content','generate_insert_logo_before_header_content');
function generate_insert_logo_before_header_content() { ?>
      <div class="site-logo">
            <img src="THE URL TO YOUR HEADER IMAGE" alt="Your site title" />
      </div>
<?php }

3. Add this CSS:

.site-logo {
      float: left;
}

That should do it 🙂

[Joe]

Hi Tom,

Thanks, your code works, and i have replaced your CSS with this:

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

[Tom]

Perfect 🙂

[Tony]

Hi Tom.

Re: http://generatepress.com/forums/topic/position-of-the-header-logo/#post-93547

Please could you provide the code to use within GP Hooks to position a logo to the left of the site title? It would also be helpful to know the correct place this code should be added to.

[Tom]

Hi Tony,

The code is just right above with step by step instructions: http://generatepress.com/forums/topic/position-of-the-header-logo/#post-94017

Let me know 🙂

[Tony]

Thanks Tom, but I was under the impression the code snippets you gave to Joe were because he didn’t have the GP Hooks add-on. I do, however, have that add-on enabled so wondered where such code should be placed and what it should be. I should also add I’m not using a child theme.

[Tony]

Sorry Tom, but this isn’t resolved.

In my last post I was trying to say that I thought the code snippets you gave to Joe were only to be used because he hadn’t got GP Hooks. Is there some other code that needs/should be added to GP Hooks and, if so, where?

Apologies if you misunderstood what I meant.

[Tom]

My mistake!

You can follow the directions above, but instead of #2 you can add the below to the “Before Header Content” hook in GP Hooks:

<div class="site-logo">
      <img src="THE URL TO YOUR HEADER IMAGE" alt="Your site title" />
</div>

Then you’ll want to add the same CSS as above.

[Tony]

Thank you Tom. That works really well.

By the way, I had to set up the child theme so that was new to me. I’m still learning. Thankfully, the WP site isn’t live yet while I set it up properly.

Once again, thanks for your help. 🙂

[Tom]

You’re welcome! 🙂

[elguavas]

i’ve done this manually using gp hooks as detailed above. is there any update on when sortable header items will be available, as you’ve outlined tom in your first reply above?

[Tom]

Not yet, been focusing on our new add-on coming out and getting updates out for the rest of the add-ons.

Once all of that is sorted out, I’ll be looking into the above 🙂

[Author]

Posts