Announcement bar overlapping nav

Hey everyone! I've done a little bit of CSS but couldn't figure out why my announcement bar is overlapping my nav.

And, on scroll it disappears. Can anyone help?

I'm using Bedford family (Hayden template)

https://verobranding.com/

@verobranding You used position: fixed; for header, so we will overlap.

Solution 1.

Set top: 38px; for header (38px is announcement bar height). 

However, when you click "X" the announcement, it will leave a 38px space above. The next solution is to disable "X" with CSS

span.sqs-announcement-bar-close {
    display: none;
}

Solution 2.

Remove position: fixed; at header, and use position: sticky

You code should be

#header {
    background-color: #3b4f40 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
}

Thank you @tuanphan

The first solution doesn't fully work because on scroll the 38px margin stays on scroll.

And, the second didn't do anything.

Is there another solution?