Hyde: How to make navigation fixed when scrolling?

Squarespace has a few new templates, one of which is http:/hyde-demo.squarespace.com

I am trying to find some css make the primary navigation fixed, when I scroll down the page.

Any help would be appreciated.

Thanks

Thank you for the quick response, but your css makes my entire navigation disappear.

Link to my site

Works! Thank you so much!

Where exactly do you paste this CSS code? Inside "Custom CSS" or "Code Injection"?

I tried your code (inside Custom CSS) on the Hyde demo site but it doesnt do anything. I'm thinking that the header background cant be opaque as it is in the demo site. Is that correct?

I am using this code and it is working Great except for users with wide screen monitors. Objects in the corners of the header disappear when window is stretched out. Is there anything you can suggest to prevent this?

@octopus,thanks for all your help. I'm not sure how you all have the patience to help so many folk on here.
I am trying to build my own site too... having some difficulties, as I'm a perfectionist and want it to be.... er.... perfect.

my site www.thatmattyh.com/filmstrying to set the nav bar fixed when scrolling, tried some code which people suggest, but my pictures slip in behind the nav bar as a result. Any ideas?

Thanks,Matt

Hi there, I am having a similar problem where my products disappear behind my navigation unless I add a spacer in the index- which then causes a lot of space when its on mobile.

How can I add space above products so that the navigation bar does not cover them?

Thank you!

Thanks so much! This code helped to get my navigation header fixed but I can't seem to get a white background behind it to stay fixed. Any thoughts?

hibernatehome.com