Different logo image for mobile

[Hilary]

Hilary

February 15, 2016 at 5:03 pm

Hello!
We are trying to have our site use a different logo when on mobile. A less complicated image, that will show up clearer. Having a tough time figuring it out. Any words of wisdom?
Thank you!
Jessamy

test.belleville.lib.mi.us
we are using a child theme.
Here are the modifications we have made so far (not effecting logo)

#nav-main ul.sf-menu ul li a, .nav-main ul.sf-menu ul li a, #nav-second ul.sf-menu ul li a {
font-size: 20px;
}

/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;