[Resolved] Change Mobile Site Header Based on Page

[Marty]

I created a custom site header for desktop and iPad using the excellent instructions in this forum post:

Change Site Header and Title – based on page

Is it possible to change the mobile site header as well for individual pages? I need to change out the site logo on one page of a client’s site. The desktop version is black-on-white. The mobile version of the logo is white-on-black, so we need to use two different versions of the logo.

Thank you in advance for your help.

[Tom]

Hi there,

I’m not too sure what you mean – currently everything looks great?

Is there a specific page I should be looking at?

[Marty]

Hi, Tom,

Thank you for the prompt reply.

The page you saw should be the correct one. I need a separate mobile NDB logo to display on that page as well when the viewport is mobile sized. Currently, the Add. logo displays and that’s not what my client wants.

Is there some additional code I need to add to this to make that work? This snippet worked great.

<?php
global $post;
$image = get_post_meta($post->ID, 'custom_header', true);
if ( ! empty( $image ) ) : ?>
      <img src="<?php echo $image; ?>" alt="" />
<?php else : ?>
      <img src="URL TO MY DEFAULT LOGO" alt="" />
<?php endif; ?>

Thanks!

[Tom]

You can switch out the mobile header logo using a filter and conditions like this: https://docs.generatepress.com/article/generate_mobile_header_logo/

Let me know if that helps or not 🙂

[Marty]

Thanks, Tom. It’s not a category/archive page, though. It’s a regular old page being used as a category. How would I modify the filter for a single page? Thanks again, sir.

[Leo]

Hi there,

Something like this should help: https://docs.generatepress.com/article/using-hooks-conditional-tags/#static-pages

Click See more info on A PAGE Page to see examples on targeting a specific page.

[Marty]

Tom, Leo, thank you for your help. I added the filter to the functions.php file. I modified the code a tiny bit from the generate_mobile_header_logo documentation, changing is_category to is_page. For others with this need, here is my revised snippet:

// Add custom page mobile logo
add_filter( 'generate_mobile_header_logo','lh_category_mobile_header_logo' );
function lh_category_mobile_header_logo( $logo ) {
    
    // Return our single page logo URL
    if ( is_page( 64597 ) ) {
        return 'https://www.YOUR-URL-HERE.com/wp-content/uploads/2017/9/mobile-header-0915-200x62.png';
    }

    // Otherwise, return our default logo
    return $logo;
}
// end filter

Thanks again for your help.

[Leo]

Glad we could help!

[Author]

Posts