Overlapping logo into Top menu bar

Hi!

I would like to create an overlapping logo similar to what is provided.
Here’s the code I’m using so far:

#top .logo {
padding-top: 0px;
width: 300px;
margin-top: -25px;
float: none;
height: auto;
z-index: 300 !important;
}

.logo, .logo a {
overflow: visible;
}

.logo img {
max-height: 100px !important;
}