You are welcome to use the code I wrote, but that was not what I intended! It is a classic static design, not responsive. However, if it helped I'm glad.
I don't think the OP understands what "responsive design" is or just mis-used the term. A lot of people now seem to be throwing the term "responsive" at flashy stuff like scripted animated garbage, and NOT what it actually means: media query based layout re-arrangement. I don't know where they get that idea, but there it is. Great, is "responsive" being turned into another garbage buzzword like HTML 5 is or "Web 2.0" was, being thrown around by people who don't actually know what they are? You bet your sweet bippy!
Really this is all something I'd NEVER suggest doing on a page in the first place just because it's an accessibility mess and would result in making it harder to make it responsive later on. It's also busted on large fonts since the little 'edge' dropdowns are misplaced thanks to pixel stupidity.
Much less all the nonsense you should never do on a layout like fixing the height of massive areas... and of course I'd swing an axe at the silly HTML 5 "nav" nonsense since that should be redundant to numbered headings on the page.
I made this as an example of how I'd approach that without the annoying bloated scripted "sticky header" garbage (can you tell I'm a fan?)
There are two versions. The one in the root uses clean markup with modern selectors, and tries to gracefully degrade in legacy IE so that while it's not pretty, visitors can at least use it.
The second version here:
Pisses all over the markup with empty span and classes, but should work properly all the way back to IE 5.2 Mac and IE 5.5 windows. Most of the fancy selectors and psuedo like first-child, last-child, and generated content do not exist the further back you go -- :first-child and :last-child for example don't exist in IE8, and generated content (:before, :after) don't work right in IE7 and don't exist in IE6.
Figured I'd give you both ways of doing it. The cute trick here is that it's dynamic, so you can change the font size until blue in the face and it will still work. Likewise I added ACTUAL responsive layout to it, stripping off the fancy styling when the screen is too narrow.
It uses one really cute 'trick' involving position:relative. You see if you have a relative positioned element and move it with top/left/right/bottom, it remains where it is in 'flow' -- aka the parent and any other elements on the page running into it treat it as if it was NOT moved. ALL you are doing in that case is changing where it and it's children are drawn. So by moving it up relative we don't need to play with making that extra section of backgrounds. The parent DIV draws the dark bar, the UL erases it with white -- then all we have to do is slide the child anchors up out of their normal drawing position and the white UL bar stays where it is. I then APO the border-generated corners in the appropriate elements. A negative margin on the first and last elements makes them 'flow out of' their parent as their 'flow size' ends up smaller than the 'render size' on that side.
There are a LOT of selector hacks in there as much of this just isn't meant to 'work' in older browsers, or even modern ones for that matter. I use the negative word and letter-spacing trick for legacy IE elements to flow together, but use display:table-cell so modern browsers (specifically webkit ones that screw up or ignore word/letter spacing) ignore whitespace between them too. The ":root" 'hack' is a cute one as it's not really a hack per say -- all modern browsers and IE9/newer know :root as the top of the document, but IE8/earlier do not. Great way to to target anything prior to IE9. I also resorted to the !ie hack for IE7/lower which I hate doing, but really doing this in a dynamic manner means those browsers need different rules for handling it.
But for all the 'hacks' the first one should work great in all modern browsers and degrade gracefully (though looking like crap) in IE8/lower. The one in the subdirectory should work all the way back to many versions of IE 5.x which is... kind of a surprise.
Though the responsive layout/media query of course won't work in IE8/lower -- but I usually shove a min-width at IE7 and 8 and fixed width at IE6, so that would be a non-issue in a real layout.
Again, I wouldn't do the scripted "sticky header" garbage; there's nothing worse on smaller displays (or sometimes even larger ones depending on the content) than having screen real-estate chewed up by some stupid menu/header that could be better used to SHOW CONTENT. Like people are too stupid or lazy to hit "home" on the keyboard? It's a waste of bandwidth, waste of time, and no matter how 'pretty' it is it makes sites harder to use, not easier. It's a poster child for what I often refer to as "JS for nothing", and also an example of what I mean by jQuery that "has no business on a website in the first place".
In any case, hope this helps.