move nav menu above header on small screens and fix

Things are coming along real nice, great theme, great plugins and useful forum.
I have worked out some serious manoeuvring for different screen sizes that keeps everything looking good in the header with a right floating logo.
A quick side question is, does having a lot of @media checks slow page loading by much?

I have a fixed header until the screen becomes too narrow.
At this point it would be ideal to move the main nav menu above the header and then fix only the nav menu allowing the header and content to scroll.
Can that be done in css?

Currently have this to fix the header

@media screen and (min-height: 700px) and (min-width: 701px) {
.custom-fixed-header {
position: fixed
top: 0;
width: 100%;
z-index: 2000;
}
.page-header-content {
padding-top: 260px;
}
}

Site is in a temporary holding location while I learn everything, can't trash the current site ;)

The Valentine Gallery

cheers