Logo Change based on media

Sep 13, 2013 at 3:22 PM
I love the skin and the flexibility but I am wondering the best approach for changing the logo based on the media being viewed. When viewed on a desktop I have a larger logo to be displayed, but when viewed on a mobile device I have a smaller scaled down version. Do I modify the CSS?
Coordinator
Sep 13, 2013 at 4:03 PM
There are many ways to accomplish this behavior.

My recommendation would be to modify the Tidy.ascx file and replace the <dnn:LOGO ID="dnnLogo" runat="server" /> code with something like <h2 class="myLogo"><a href="/">Company Name</a></h2>

Then you can create the CSS to support it:
.myLogo {
margin:0;
padding:0;
}

.myLogo a {
display:block;
background:url(myLogo-large.png) no-repeat;
text-indent:-2000px;
overflow:hidden;
height:100px;
width:100px;
}
Then in the @media only screen and (max-width: 767px) section add:
.myLogo a {
background:url(myLogo-small.png) no-repeat;
height:50px;
width:50px;
}
Give that a shot and let me know how it works for you.
Marked as answer by adamhumphrey on 10/10/2013 at 8:35 AM