Keep Menu While Scrolling

I want my menu to be fixed at the top once a visitor scrolls past it. I'm on the Om template. 

Thanks!

Hi @etspaulding. Could you provide a link to the site/page in question (for trial sites, see here). Since your style settings may be a factor, a link to the site/page makes it easier for others to write and test a quality answer.

@brandon, sure thing! http://www.hiddenhaven.org/ is our site. 

We'd like the menu bar to act like it does at http://www.highhillcamp.org/

Here you are. Insert this via the CSS Editor:

@media only screen and (min-width: 767px) {
    #header {
        position: sticky;
        top: 0;
        z-index: 9999;
        background-color: #F0F4F4;
    }
}

A few notes:

• This doesn't affect the mobile header/navigation. To do that properly, you'd need to use JavaScript.
• If at some point your body background color becomes different than your header color, things would get more complicated.
• The code above will work in modern browsers, but not older ones. Older ones will simply have the non-fixed header (not a big deal).

@brandon, excellent! Thank you!!