Site logo

Archived topic

Change Mobile Site Header Based on Page

7 replies · Started by Marty on December 15, 2017

Viewing posts 1–8 of 8

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.

Hi there,

I'm not too sure what you mean - currently everything looks great?

Is there a specific page I should be looking at?

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!

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.

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.

Glad we could help!

This archived topic is closed to new replies.