Different Logo for Desktop vs. Mobile

Support Area Forums Selfie Different Logo for Desktop vs. Mobile

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://paperboy.marketing
  • Author
    Posts
  • #29148

    James Harper
    Participant

    Hi Bill,

    The logo I’m using is fairly wide, so the menu button sits on top of it while in mobile view. Can you help me adapt the fix you provided here (http://support.organizedthemes.com/forums/topic/different-logos/) so I can display a smaller logo for mobile view?

    Thanks!

    James

    #29150

    Bill Robbins
    Moderator

    Good Morning James,

    It is possible to do that. Here’s how:

    1. Go to the Media Section in your WordPress dashboard and select Add New. Upload the image you’d like to use. Once the upload is complete, click on the edit link. Look on the right hand side of the screen that opens up for the File URL. We’ll need that in just a minute.
    2. Go to your theme options page and choose the Advanced tab.
    3. Scroll down to the Custom CSS box and add this:
      
      @media only screen and (max-width: 520px) {
      
      	#logo img {
      		visibility: hidden;
      	}
      	
      	#logo {
      		background: url(http://yoursite.com/image.png) left center no-repeat;
      		background-size: contain;
      	}
      	
      	#logo a {
      		float: left;
      	}
      
      }
      
    4. Replace the http://yoursite.com/image.png with the URL to your smaller logo.
    5. Update your settings.

    That should swap out your logo for a smaller one on smaller screens. You can change the threshold where the change is made by altering the 520px that’s at the top of the snippet above. If you run into any trouble or questions, let me know.

    Have a great weekend,
    Bill

    #29293

    James Harper
    Participant

    Thanks Bill! That worked perfectly.

    #29294

    Bill Robbins
    Moderator

    Glad to hear that worked out of you James. Let me know if you need anything else ?

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Different Logo for Desktop vs. Mobile’ is closed to new replies.