2 logos

• 

  kahunadao · Member · Jan 24, 2017 at 4:12 pm

  • Copy link
  • Add topic to favorites

  Hi there! I know it’s possible to use CSS to show or hide certain things depending on the size of a screen; I have this logo here (https://www.dropbox.com/s/n94gkhdaxs9zdne/Logo_KahunaDAO_quer_cmyk_farbig_NEU.pdf?dl=0), which is on the big, full-screen. My question is this–using CSS, is it possible to HIDE that logo, and show this one here: (https://www.dropbox.com/s/qnqbkm6q4pipjdl/Logo_KahunaDAO_hoch_cmyk_farbig_NEU.pdf?dl=0) on mobile screens? Thanks@

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 26, 2017 at 2:20 am

  • Copy link

  Hi there, we can do that. I’ve used a Media Query to add the wider logo on screens 768px and wider. Below that, the narrower logo you have now shows. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  @media screen and (min-width: 768px) {
    #masthead .site-branding .site-logo {
      visibility: hidden;
    }
    #masthead .site-branding .site-logo-link {
      background-image: url('https://kahunadaodotcom.files.wordpress.com/2017/01/bildschirmfoto-2017-01-22-um-17-38-131.png');
      display: block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    #masthead .site-branding {
      max-width: 400px;
      width: 100%;
    }
  }

• 

  kahunadao · Member · Jan 28, 2017 at 1:12 pm

  • Copy link

  thanks a lot. doesnt seem to work. sorry, but CSS is completey new to me. so i did c&p that text into the css…..i uses the new link that i created for the logo that fits to the small size screen. the other version of the logo is activated as usual using the customizer.
  ok so far? but it only shows the horizontal version of the logo, no matter what device i use. i tried to click – use css on mobile – but it also doesnt change.

  anyway, if this should get complicated —- its not that important, since this new logo looks good on all screens i guess. the other one would give the mobile device a nicer look, though.

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 4:43 pm

  • Copy link

  Hi @kahunadao!

  I made a minor change to the previous code (max-width instead of min-width) and I swapped out the image URL (it looks like the one @thesacredpath used has been removed?)

  This should do the trick for swapping the logos on the different screen sizes:

  @media screen and (max-width: 768px) {
    #masthead .site-branding .site-logo {
      visibility: hidden;
    }
    #masthead .site-branding .site-logo-link {
      background-image: url('https://kahunadaodotcom.files.wordpress.com/2017/01/logo_kahunadao_hoch_rgb_farbig-01.png');
      display: block;
      background-size: contain;
      background-repeat: no-repeat;
    }
    #masthead .site-branding {
      max-width: 400px;
      width: 100%;
    }
  }

• 

  kahunadao · Member · Jan 31, 2017 at 5:29 pm

  • Copy link

  that rocks! great, thanks a lot.

  NOW: can we even center the logo that fits to the mobile screens?

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 7:30 pm

  • Copy link

  We should be able to, yes. Here’s a modified version of the snippet:

  @media screen and (max-width: 768px) {
  	#masthead .site-branding .site-logo {
  		visibility: hidden;
  	}
  
  	#masthead .site-branding .site-logo-link {
  		background-image: url('https://kahunadaodotcom.files.wordpress.com/2017/01/logo_kahunadao_hoch_rgb_farbig-01.png');
  		display: block;
  		background-size: contain;
  		background-repeat: no-repeat;
  	        background-position-x: 50%;
  	}
  
  	#masthead .site-branding {
  		max-width: 400px;
  		width: 100%;
  	        float: none;
  	        margin: 0 auto;
  	}
  }

  What we’ve done is remove the float that was pushing it to the left, and applied some margins to make it sit in the middle. Then we’ve changed the background position of the logo on smaller screens so it’s in the middle – because even though you can’t see it, the wider image is still there. It’s just invisible :)

• 

  kahunadao · Member · Jan 31, 2017 at 7:34 pm

  • Copy link

  amazing – I am impressed ;)

  thanks a lot, great work!

• 

  staff-loquaciousloon · Staff · Jan 31, 2017 at 8:11 pm

  • Copy link

  My pleasure!

• 

  kahunadao · Member · Jan 31, 2017 at 8:15 pm

  • Copy link

  oh—-unfortunately—-on my phone it stays on the left. I did clear the cache…..

• 

  kahunadao · Member · Jan 31, 2017 at 8:39 pm

  • Copy link

  …but it does on the iPad….so I guess its my problem, never mind.

• 

  staff-loquaciousloon · Staff · Feb 1, 2017 at 2:10 pm

  • Copy link

  Interesting. It was centered on any screen size that triggered the smaller logo for me.

  It looks like you may have removed the CSS since your last post – let me know if you add it back and need a second pair of eyes :)