Display a completely different logo on mobile browsers

Ever visit our website on your phone?

If you haven’t do it now, something cool happens.

Besides the awesome power that comes with holding the best resource for web designers (oh, yes I did) in your hand, did you notice the logo?

If you are reading this on your laptop/desktop our logo looks like this:

But if you are reading this on your phone, it looks like this:

Simple, clean and elegant.

It’s so cool, the logo doesn’t even need letters.

So, what’s happening here?


A little CSS Magic

That swap is happening with the help of just one little line of CSS.

Basically we added some CSS that in plain English says

If this website is being viewed on a small screen (like an iPhone), show an alternative logo instead.

Pretty simple, right?

Let me show you how to do it….


Logo swapping CSS

Assuming that you are using Genesis with Dynamik Website Builder (and you should be), here’s how to make a completely different logo appear on mobile devices.

STEP 1

Make a smaller version of your logo and upload it to Genesis > Dynamik Design > Images.  How small?  That’s up to you. if you want to use ours as a starting point, here it is:

This image is 100X80

STEP 2

Copy the CSS below

.header-image .title-area, .header-image .site-title, .header-image .site-title a { background: url(images/logo-small.png) center top no-repeat; width:100px;}
.header-image .site-header .wrap .title-area {margin: 0 auto;}

See the purple part?  Change that to the URL of your small logo.

See the red part? Change that the width of your small logo.

STEP 3

Go to Genesis > Dynamik Design > Responsive and paste the code (make sure you update the two items from above) in the last box on the right.  Not sure what that means?  Here ya go:

Click to enlarge

Click to enlarge

STEP 4

Save your change and bask in all the glory that is you.