Responsive Sticky Announcement bar with Sticky Nav

Hi Experts,

Here is the code I've added in the CSS for the sticky announcement bar with a sticky nav (image attached).

.Header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 35px;
}
.Content-outer {
  margin-top: 50px;
}
.sqs-announcement-bar-dropzone {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
span.sqs-announcement-bar-close {
    display: none;
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 80px;
}

However, if the browser is set to smaller, the set height of the announcement bar would cut off the messages (image attached). If I change the code for the header top to bigger than 35px, then it creates a gap between the announcement bar and the nav bar. 

Question: Is there any way to avoid this happening? TIA

Hi,

What is your site url?

I think we need to set announcement bar height to auto