How do I make a fixed CSS element a certain width.

Hey there everyone. I am a freelance website designer. I have created a floating menu on this website I am building for a client. Everything looks great!

The problem is this. When I insert the 'position: fixed;' CSS element, and adjust the width to 980px, the menu stays at the top of the screen like it should, and is the width of the website container. Everything looks good so far. Now, when viewing the website on smaller resolutions than 1024x768px, the menu stays at 980px.

I need to figure out a way to make this menu stay at 980 px, but either disappear when in small resolutions, or at least shrink with the screen on smaller resolutions. Does anyone have any suggestions?

Here is the CSS style applied to this menu:

#discuss-wrapper .discuss-toolbar .navbar-inner {
position: fixed;
margin-left: -32px;
margin-top: -195px;
min-height: 36px;
padding-left: 10px;
padding-right: 10px;
width: 960px;
}

Here is a link to the URL to see it in action: www.eJOIN.me. This site is best viewed on Google Chrome, until I update the cross-browser support.

Report as