Gap between fixed header under notification bar

I built this site entirely with Elementor and coded the css to make the header fixed.

My problem started after the client requested a notification bar at the top to promote specials. Now I have a gap between the header and bar that shows the top of the hero image and the page title.

I’m wondering how I can close this gap. Here is the Header code I’m working with:

.site-header-main {
position: fixed;
z-index:999;
background: #313439;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
left: 0;
right: 0;
padding-left: 7.5%;
padding-right: 7.5%;
}

Any suggestions you can provide would be much appreciated.
cheers,
Mari

The page I need help with: [log in to see the link]