[Resolved] Move Logo to Bottom of Page Hero?

[Kiley]

Is it possible to move the logo to the bottom of the page hero image?

I’m using a hero image and the following PHP in my functions.php file (it’s a child theme) to get the navigation bar below the header image:

add_action( 'after_setup_theme','craig_move_navigation' );
function craig_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

Is there a way I can move the logo so it sits just above the navigation bar?

[Leo]

Hi there,

Hmm instead of using the page hero to add that image, what if you use that as the header background image?
https://docs.generatepress.com/article/backgrounds-overview/

Then you should be able to adjust the header padding to get the desired result:
https://docs.generatepress.com/article/header-padding/

It’s untested but I think it should work. Give it a shot and let me know 🙂

[Kiley]

I tried your suggestion but the problem with making it a header background and using padding is the image is no longer responsive when browser size is adjusted. Or, rather, the image resizes but the padding does not so you see the image repeating instead as the window gets smaller and the image shrinks. It also looks odd to have a huge header in a smaller browser window.

[Leo]

Both methods are adding the image as a background image which isn’t responsive by nature.

You can try increasing the top header padding using your current method:
https://docs.generatepress.com/article/header-padding/

[Kiley]

That’s odd because the image does seem to be responsive as a hero image. And when I increase the top header padding it moves the logo down but the logo’s position isn’t responsive so it creates a whole new problem.

You can see below when I resize the window, the image resizes as well but because of the increased padding you suggested, the logo goes below the primary navigation bar:

[IMAGES REMOVED]

I’ve switched it back to the regular padding amount for now. Is there a way to get the logo to sit above the primary navigation bar and move as the window resizes like the hero image and the navigation bar do?

[David]

Hi there,

what you could do is to insert the logo inside the Header element with some HTML like so:

<div class="site-logo hide-on-mobile hide-on-tablet">
    <a href="https://geekmeetsglam.com/" title="Geek Meets Glam" rel="home">
        <img class="header-image" alt="Geek Meets Glam" src="https://geekmeetsglam.com/wp-content/uploads/2019/04/Logo-Full-Colour-Standard-Size.png" title="Geek Meets Glam" srcset="https://geekmeetsglam.com/wp-content/uploads/2019/04/Logo-Full-Colour-Standard-Size.png 1x, https://geekmeetsglam.com/wp-content/uploads/2019/04/Logo-Full-Colour-Retina-Size.png 2x" width="900" height="450">
    </a>
</div>

Then change the Top padding to 24% and the bottom padding to 0.

Then add this CSS:

.page-hero .inside-page-hero {
    position: relative;
}

.page-hero .site-logo {
    width: 210px;
    position: absolute;
    left: 0;
    bottom: 1em;
}

[Kiley]

Not sure if I’m doing this right. I added a new Header element with the code you supplied, changed location to Entire Site, and changed the padding as you instructed. I also added the CSS you wrote. But nothing’s changed at all. No new logo has appeared, the current logo’s position hasn’t changed. I suspect maybe the Header element wasn’t quite where you meant me to add it? Is that right?

[David]

Do you still have the old Header Element enabled and set also to Entire Site? If so this will override the new one. To test it out set your new one to front page. And exclude the front page from the old one. You should see the new one on the Home page.

[Kiley]

Oh, yes, I see what you mean. I blanked out and didn’t add it to my original Header element (silly me!).

That kind of works however with that option when the site is viewed in mobile, now the logo doesn’t disappear. Whereas with the default logo in use, that logo disappears when the site is viewed in mobile. So it works great on desktop, looks okayish on tablet, but looks horrible on mobile:

[IMAGE REMOVED]

[David]

Edited the HTML above to include hide-on- classes. Update the HTML to match and it will remove the logo from mobile and tablet

[Kiley]

Thanks! That worked!

[David]

Glad to be of help

[Author]

Posts