Need help? Check out our Support site, then


CSS for multiple responsive logos

  1. I am currently using theme Radiate and have discovered a CSS workaround for the default small logo size in the upper left corner. I used the following code to create a "banner" size logo:

    .site-branding .site-logo-link {
    	background-image: url('https://senecadairy.files.wordpress.com/2017/01/longlogo2.png');
    	background-repeat: no-repeat;
    	height: 100px;
    	width: 1218px;
    }
    
    .site-branding .site-logo {
    	visibility: hidden;
    }

    This works perfectly except that it is not responsive. I found the following code on Stack Overflow to load a smaller logo if maxwidth is less than 600px, but I can't seem to get them to work together. Are you able to help me find a solution?

    .site-branding .site-logo-link {
    	background-image: url('https://senecadairy.files.wordpress.com/2017/01/longlogo2.png');
    	background-repeat: no-repeat;
    	height: 100px;
    	width: 1218px;
    }
    
    .site-branding .site-logo {
    	visibility: hidden;
    }

    Thank you!

    Truman

    The blog I need help with is senecadairysystems.us.

  2. Sorry, the second code is wrong. I just realized that to use the Stack overflow code I would need to be able to tweak the html, so it looks like I am back to square 1.

    Is there a way to have 2 or 3 responsive logos using CSS in WP?

    Thanks again!

  3. Is there a way to have 2 or 3 responsive logos using CSS in WP

    Sure, you would just need to add in the CSS for various screen widths. I recommend looking at your theme's CSS to determine what sizes to use. Also, the CSS may vary a bit per theme.

    But it would look something like this:

    /* for every width */
    .site-branding .site-logo {
    	visibility: hidden;
    }
    
    .site-branding .site-logo-link {
    	background-repeat: no-repeat;
            background-size: 
    }
    
    /* huge screens */
    @media screen and (min-width: 1177px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/longlogo2.png);
        background-repeat: no-repeat;
        height: 100px;
        width: 1218px;
      }
    }
    
    /* medium screens */
    @media screen and (min-width:769px) and (max-width:1176px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/somelogo.png);
        background-repeat: no-repeat;
        width: 500px; /*or whatever*/
       height: 100px; /* and so-on*/
      }  
    }
    
    /* small screens */
    @media screen and (max-width: 768px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/smallerlogo.png);
        /* figure out a good width and height depending on the logo; remember you can use percents too and max-width */
      }
    }

    Make sense? Obviously you'd need to adjust the image sizes and what not. But I hope that helps.

  4. You could also consider showing the built-in logo by default, then hiding it in certain sizes. Whatever makes the most sense for your situation.

  5. Supernovia, Thank you for your response! Yes, this makes sense. I will set the different sizes and work on that today. If you are asking about hiding the default logo and showing no logo at all, I think I would opt for the first choice, if I can figure it out. ;o) Thanks again for your assistance, I'll let you know!

  6. I have taken your code and modified it to point to my 3 logos. I also adjusted the sizes, but still can't seem to get it to display any of the logos. Here's the code I am using:

    .site-branding .site-logo {
    	visibility: hidden;
    }
    
    .site-branding .site-logo-link {
    	background-repeat: no-repeat;
            background-size:
    }
    
    /* huge screens */
    @media screen and (min-width: 1100px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/logo-sds-1218.jpg);
        background-repeat: no-repeat;
        height: 100px;
        width: 1218px;
      }
    }
    
    /* medium screens */
    @media screen and (min-width:769px) and (max-width:1099px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/logo-sds-768.jpg);
        background-repeat: no-repeat;
        width: 768px;
       height: 100px;
      }
    }
    
    /* small screens */
    @media screen and (max-width: 768px) {
      .site-branding .site-logo-link {
        background-image: url(https://senecadairy.files.wordpress.com/2017/01/logo-sds-215.jpg);
      }
    }

    Thanks again for any assistance you might be able to offer!

  7. Try this; I re-did the CSS as I would do it rather than relying on the sample. Also I adjusted the min and max widths for testing a bit.

    .site-branding a img {
    	visibility: hidden;
    }
    
    .site-branding a {
    	display: block;
    	background-repeat: no-repeat;
    	height: 100px;
    }
    
    /* huge screens */
    @media screen and (min-width:1024px) {
    	.site-branding a {
    		background-image: url('https://senecadairy.files.wordpress.com/2017/01/logo-sds-1218.jpg');
    		width: 1218px;
    	}
    }
    
    /* medium screens */
    @media screen and (min-width:769px) and (max-width: 1023px) {
    	.site-branding a {
    		background-image: url('https://senecadairy.files.wordpress.com/2017/01/logo-sds-768.jpg');
    		width: 768px;
    	}
    }
    
    /* small screens */
    @media screen and (max-width: 768px) {
    	.site-branding a {
    		background-image: url('https://senecadairy.files.wordpress.com/2017/01/logo-sds-215.jpg');
    	}
    }
  8. Thank you so much Supernovia!
    I just dropped the CSS into my file and it's working perfectly.
    I really appreciate your help and quick response!

  9. No problem. Cheers, @senecadairy :)

Topic Closed

This topic has been closed to new replies.

About this Topic