Archived topic
Position of the header logo
26 replies · Started by Anonymous on March 30, 2015
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
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 :)
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
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 :)
Hi Tom,
Thanks, your code works, and i have replaced your CSS with this:
.site-logo,
.site-branding {
display: inline-block;
vertical-align: middle;
}
Perfect :)
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.
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 :)
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.
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.
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.
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. :)
You're welcome! :)
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?
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 :)