Add Logo to Mobile / Tablet Nav Bar

On my website, PantrySpa.com, I am trying to add our logo to the right of the hamburger menu on the nav bar at the top. I tried the following changes to the css stylesheet, and when I look at the source for the page, the logo is there, but it isn't actually showing up on the screen. How do I fix this?

@media only screen and (max-width: 770px) {
.header-image h1.site-title a {
position: absolute;
top: 0;
right: 0;
z-index: 999;
width: 143px;
background-size: 130px !important;
background: url("http://www.pantryspa.com/wp-content/uploads/2015/02/PantrySpaLogo.png") no-repeat scroll 0 0 transparent !important;
left: 0;
margin-left: 40px;
}

.site-header .widget-area {
position: absolute;
width: 50%;
top: 0;
right: 0;
}

.nav-secondary .responsive-menu-icon::before {
float: left;
}

nav.nav-primary {
display: none !important;
}
}

I have granted support access through the wpmu plugin if that helps.

Thanks!