CSS for multiple responsive logos

  • senecadairy · Member ·

    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: (visible only to logged in users)

  • senecadairy · Member ·

    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!

  • supernovia · Staff ·

    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.

  • supernovia · Staff ·

    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.

  • senecadairy · Member ·

    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!

  • senecadairy · Member ·

    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!

  • supernovia · Staff ·

    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');
	}
}
  • senecadairy · Member ·

    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!

  • supernovia · Staff ·

    No problem. Cheers, @senecadairy :)

  • The topic ‘CSS for multiple responsive logos’ is closed to new replies.