Fixed Navigation Menu at Top of Screen

I am using the Retina Theme and am trying to get the navigation menu to stay fixed at the top of the screen (without the header image).

I know how to fix the menu, but it remains in the middle of the page since it exists underneath the header image and i want it to scroll with the image and then remain at the top.

here is the current CSS in the header section

#header {
width: 100%;
background: #010101;
}

#headimg #logo-text {
padding: 40px 0;
}

#headimg #logo-text .site-name {
display: block;
font-family: ‘Comfortaa’, cursive;
font-size: 36px;
line-height: 50px;
font-weight: normal;
}

#headimg #logo-text .site-description {
display: block;
font-size: 18px;
line-height: 28px;
}

#nav {
width: 100%;
background-color: #1b1b1b;
}

My site is https://www.potsandplaces.com. Thanks in advance,

Erin