Brine - Scroll past Logo and fix header navigation at top of page

Site URL: https://www.yaliglass.com

I am refreshing our website (Brine 7.0) and would like to move our logo to the top centre position, with the main navigation underneath. As it takes up lots of space as a header I would like to be able to have the logo disappear when I scroll down and then fix the main navigation menu at the top of the page. I cannot figure out how to do this, I have tried various CSS but nothing has worked so far. Any help would be really appreciated!

I attach two screen shots of what I would like it to look like (with Logo at top, then hidden when I start scrolling down to view the page content).

Thanks!

Ema