Replace Logo with Icon on Smaller Screens

Date Published: 13 October 2018

Replace Logo with Icon on Smaller Screens

I'm not a responsive design expert. Or even close. But I did recently figure out how to replace a full logo with a smaller square icon on a web site so when it's viewed on a phone the header is more compact. Here's how I did it so I can find it again, and to help others, and so smarter people can come by and tell me better ways to do it.

The HTML

icon

The CSS

icon {

display: none;

}

logo {

display: block;

}

/* Hide/rearrange for smaller screens */ @media screen and (max-width: 600px) { #icon { display: block; align-content:center; }

#logo {
    display: none;
}

}

Basically when the screen shrinks below 600px, the two images swap between display:block and display:none.  Seems to work fine everywhere I've tested it. Hope it helps some others.

Steve Smith

About Ardalis

Software Engineer

Steve is an experienced software architect and trainer, focusing currently on ASP.NET Core and Domain-Driven Design.


Ardalis

Copyright © 2020