Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] SVG Logo Overwrite in Header

Home Forums Support [Resolved] SVG Logo Overwrite in Header

Home Forums Support SVG Logo Overwrite in Header

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #600299
    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.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #600440
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #600451
    Todd

    Yes, that worked. Thank you!

    #600901
    Tom
    Lead Developer
    Lead Developer
    #600975
    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?

    #601213
    Tom
    Lead Developer
    Lead Developer

    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.

    #601573
    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.

    #601584
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #601616
    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.

    #601844
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #602270
    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?

    #602348
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #602635
    Todd

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

    #602906
    Tom
    Lead Developer
    Lead Developer

    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.

    #602960
    Todd

    I have set the bg color to white.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.