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;
}