How to keep Fixed position navigation static positioned when resizing window

Question

Heres the website http://designobvio.us/dov2/index.html

CSSframework: grid960.

heres the css line

#siteSectionOne #nav{position:fixed; left:50%; margin-left:-220px; z-index:10;}

This may take jQuery/javascript to accomplish; I'll do the research if anyone can just give a few leads in the right direction

When I resize the window the navigation bar moves in unison. causing mergers at some point or for it to float way too far left and look ugly.

Is there anyway to keep the navigation fixed width wise; while maintaining the fixed scrolling

I'm a little stumpped on how to accomplish this I've tried left:% and -margin-left; I've tried putting it in a parent; however, nothing seems to override the parent div

Any ideas thanks you!

Answer 1

This shouldn't require JavaScript. Try this:

Update your #siteSectionOne #nav selector to the following:

#siteSectionOne #nav {
  position: fixed;
  left: 50%;
  margin-left: -470px;
  z-index: 10;
}

That seems to work for me.