Logo over announcement bar and header

@AppealedApple totally! I hopped into your CSS and updated some of the code you had in there to make this magic happen. Feel free to adjust the top:-2rem to the size that suits you best! 

How this works: we had to move the announcement bar down to z-index:0, then apply a position absolute to the image so we could give it a z-index and move it up the x-axis with a negative top value.

Hope this info helps and best of luck with your project!

header#header {
    box-shadow: 3px 4px 8px rgba(54,49,94,.5)
}

footer#footer {
    box-shadow: 3px 4px 8px rgba(54,49,94,.5)
}

#announcement-bar-text-inner-id p {
    font-size: 16px !important;
    text-align: right !important
}

.sqs-announcement-bar-close {
    display: none !important
}
.sqs-announcement-bar-dropzone{
z-index:0!important
}

.header-title-logo,.header-title-logo a {
    overflow: visible !important;
    margin-bottom: -50px;
}

.header-title-logo img {
    max-height: 90px !important;
    position:absolute;
    top:-2rem;
    z-index:999!important
}

.header-title-logo img,.header-title-logo a {
    max-height: 150px !important
}