Responsive Header/Banner

Support Area Forums Forward Responsive Header/Banner

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: www.justiceunlocked.com
  • Author
    Posts
  • #30304
    Jamie Sutton
    Participant

    Bill,

    My web developer/graphic designer is asking a question about the responsiveness setting. She’s been playing with different banners and logos, and we’ve settled on one we like. But changing over to mobile/tablet it’s not exactly re-sizing just the way she’d like it.

    Essentially, her question was – is there a way to alter the theme or any settings so that below a certain width it uses one logo/banner file, and above a certain with, it uses a different file?

    #30305
    Bill Robbins
    Moderator

    Good Morning Jamie,

    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 the Appearance section in your WordPress dashboard and click on Customize.
    3. Look down for the advanced section and click on it. Then choose Custom CSS.
    4. In the box there, add this:
      
      @media only screen and (max-width: 767px) {
      
      	.image-logo img {
      		display: none;
      	}
      	
      	.image-logo a {
      		display: block;
      		width: 100%;
      		text-align: center;
      	}
      	
      	.image-logo a:before {
      		content: url(https://yoursite.com/image.png);
      	}
      
      }
      
    5. Replace the http://yoursite.com/image.png with the URL to the image you uploaded earlier.
    6. Save your changes.

    That should give you a different logo when the browser window is 767 pixels wide or smaller. Feel free to tweak that size to achieve the effect you’re looking for. You can also duplicate it to have yet other logos when other sized screens are being used too.

    Let me know if you have any trouble and have a great week,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Responsive Header/Banner’ is closed to new replies.