Code to replace header image and navigation bar when viewed on mobile devices

I'm using the Blogs Mu theme on a lot of sites and have been frustrated with the native resizing of my header images when viewed on mobile devices. I'm wondering if there is code I can insert within the the header.php file to switch the image (to a more mobile friendly image of my choosing) when viewed on mobile devices.
I also have many submenus in the navigation bar which are manageable when viewed in desktop mode, but are overwhelming when viewed on a mobile device, as they are all collapsed into a single list of menu options. I'd like the mobile navigational menu to retain the structure of the desktop version. Is there a way to filter for that too?

  • Panos

    Hello xbladerunner ,

    Lets see your changes one by one and I'll try to explain what is needed:

    1) replace the header image that is resized so small

    You can use this CSS:

    @media screen and (max-width: 960px) {
    #top-bg a img{
    		content:url("https://premium.wpmudev.org/wp-content/uploads/2012/05/image.png") !important;
    	}
    }

    The drawback with this is that it doesn't work on FireFox. I have posted it here mostly so you can try it out.

    You can of course use some javascript instead. If your theme doesn't provide a custom javascript field you can use a plugin like Simple Custom CSS and JS to add the following code:

    jQuery( document ).ready(function(){
    	jQuery(window).resize(wpmudev_replace_logo());
    });
    
    function wpmudev_replace_logo(){
    	if (jQuery(window).innerWidth() > 960) {
    		jQuery( '#top-bg a img' ).attr( 'src', 'https://premium.wpmudev.org/wp-content/uploads/2012/05/image.png' );
    	}
    }

    Another way would be to edit the header and add the smaller image tag which you can hide with css and then swap on smaller screens with css again.

    2) get rid of the search bar

    You can hide the search bar by adding the following css:

    @media screen and (max-width: 480px) {
    
    	#searchform{
    		display: none!important;
    	}
    }

    3) replace the ugly (and unmanageable) mobile navigation bar

    I think you mean the menu dropdown right? We can first hide it with:

    @media screen and (max-width: 480px) {
    
    	#top-dropdown{
    		  display: none!important;
    	}
    }

    Then you can use a plugin to create a new menu that appears in smaller screens, like Responsive Menu. It would probably require some css for sizes and colors so you can let us know if you need anything with this.

    Hope you find this helpful!

    Kind regards,
    Panos

  • xbladerunner

    Thanks Panos!

    2 of the 3 issues here are now solved.

    Here's where I'm still struggling. The Simple Custom CSS & JS plugin doesn't play nice with my setup, producing an "exclusion error" which I didn't take the time to fully investigate. So I used the CSS you recommended which works great to replace the header banner image -- except for one thing. The replacement image replaces several other images when viewed on mobile devices. For instance, I have two button images I use on each page of my resource directory for people to identify broken links or suggest new resources -- but those images get replaced along with the banner. This occurs in my footer as well, where I have images of several international flags used as buttons to translate the site -- those images are replaced along with the banner. Is there an easy fix for this?

    The other stuff is now resolved. Your code for removing my theme's default mobile menu bar worked great. But when I investigated options for replacing the mobile menu bar, I realized that the theme's header file only triggered the mobile menu when/if the mobile search bar conditions were triggered. So I decided to just hack my child-theme header file... I replaced everything between the mobile search div tags with a note to mobile users to turn their devices into landscape orientation to gain access to a better experience! Works great!

  • Panos

    Hello xbladerunner ,

    Regarding the Simple CSS and JS plugin there are several other you can use, like Simple Custom CSS for CSS and Sublime Custom JS Editor for JS.

    The replacement image replaces several other images when viewed on mobile devices

    Replace

    function wpmudev_replace_logo(){
    	if (jQuery(window).innerWidth() > 960) {
    		jQuery( '#top-bg a img' ).attr( 'src', 'https://premium.wpmudev.org/wp-content/uploads/2012/05/image.png' );
    	}
    }

    with the following:

    function wpmudev_replace_logo(){
    	if (jQuery(window).innerWidth() > 960) {
    		jQuery( '#top-bg .top-bg-inner a img' ).attr( 'src', 'https://premium.wpmudev.org/wp-content/uploads/2012/05/image.png' );
    	}
    }

    as top-bg-inner seems to be unique. Actually top-bg is an id of an element which is supposed to be unique but I did see that it is used in another element.

    I replaced everything between the mobile search div tags with a note to mobile users to turn their devices into landscape orientation to gain access to a better experience! Works great!

    Glad you managed it :slight_smile: Keep in mind though that you will need to repeat this change with every theme update, so note these changes, and before updating, repeat them in a testing site first.

    Cheers!
    Panos

  • xbladerunner

    Thanks Panos!

    Works great! I used the CSS option instead of the JS, replacing

    @media screen and (max-width: 960px) {
    #top-bg a img{
    		content:url("https://premium.wpmudev.org/wp-content/uploads/2012/05/image.png") !important;
    	}
    }

    with

    /* custom from Panos at wpmudev, to switch theme's banner when viewed on mobile devices 5.25.16 */
    
    @media screen and (max-width: 960px) {
    #top-bg .top-bg-inner a img{
    		content:url("https://xxxxxxx.address.to.your.own.mobile.png") !important;
    	}
    }

    I've been using the Simple Custom CSS plugin for awhile, so as not to have to repeat changes when themes update. Thanks for your help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.