[Resolved] SVG Logo Overwrite in Header

[Todd]

Hello, I am trying to get a logo in the header to overwrite with a page header logo so that it reverses out or is it white. I have uploaded it in the page header settings and have tried everything I can think of and can’t get it to work. Both the current logo in the header and the Reverse logo that I want to overwrite are SVG files.

[Tom]

Hi Todd,

There’s currently a bug when trying to replace the site logo when a retina logo is added.

Since you’re using an SVG, you don’t need a retina logo. If you remove it in “Customize > Site Identity”, the custom logo in your Page Header should work 🙂

[Todd]

Yes, that worked. Thank you!

[Tom]

No problem 🙂

[Todd]

I did notice that the Overwrite logo does not show up in mobile?

Do I have to change that with CSS for those pages?

[Tom]

Ah yes, the mobile header option is missing an option in Page Header as well.

Page Header is undergoing a re-write right now, which will be available in GPP 1.7.

[Todd]

Is there a good way to target the CSS with a class and replace the header logo in Mobile for all the headers that have a logo that is being overwritten until GP 1.7 is available?

If not, .page id, .page-id ?

I looked for I support articles related to this and it looks like you link to some CSS off of the following support topic but it seems the CSS is more related to showing side bars:

https://generatepress.com/forums/topic/override-mobile-logo-with-custom-page-logo/

Thank you.

[Tom]

You would have to hook the second logo in:

add_action( 'generate_inside_mobile_header', 'tu_add_custom_mobile_header' );
function tu_add_custom_mobile_header() {
    ?>
    <div class="site-logo mobile-header-logo page-header-mobile-logo">
        <a href="URL TO HOMEPAGE" title="TITLE OF SITE" rel="home">
            <img class="header-image" src="URL TO IMAGE" alt="TITLE OF SITE">
        </a>
    </div>
    <?php
}

Then add this CSS:

.page-header-mobile-logo {
    display: none;
}

@media (max-width: 768px) {
    .page-header-content .mobile-header-logo {
        display: none;
    }

    .page-header-content .page-header-mobile-logo {
        display: block;
    }
}

That should do it 🙂

[Todd]

Brilliant, works like a charm. Best customer service in the world. Thank you.

So I would just disable this snippet once GP 1.7 releases? And in GP 1.7 this will just work right out of the page header when a logo is set to overwrite?

And what is the best way to target the Search Icon and Hamburger for the these headers so I can reverse these out of the background also.

[Tom]

No problem!

In 1.7 there will be a retina option inside the actual Page Header settings that you’ll want to use.

That’s strange – those links should be white.

Try this:

.generate-merged-header #mobile-header:not(.toggled) .menu-toggle,
.generate-merged-header #mobile-header .mobile-bar-items a, {
    color: #fff;
}

[Todd]

Thank you.

The last problem that I have is when the nav is sticky on mobile the logo and nav elements now are white on white on these merged pages. So it seems that The logo and nav elements in this instance has to switch back to normal to show up on white. Is there a way to address that?

[Tom]

Ah yea, that’s a problem I need to address within the plugin. Perhaps it would be better to keep the mobile header as is (before the tweak), and un-merge it on mobile?

Let me know 🙂

[Todd]

Yes, I would be good with that but how do I change that for mobile?

[Tom]

Right now it looks like your navigation doesn’t have a background color in “Customize > Colors > Primary Navigation”.

If you could set those colors up, I can give you some CSS to make sure the mobile header keeps those colors instead of going transparent.

[Todd]

I have set the bg color to white.

[Author]

Posts