i have a fixed menu at the top of my screen, that works great, but when i got to make the browser window smaller, rather than all the elements in the menu staying where they are, they all dropdown underneath the menu to stay in the open window. My idea is that i want the positions to not become fixed when the window is made smaller, so they stay in position and can scroll to see the rest of the content. Is this possible?
Here is the code for the html of the menu header:
<div id="head_wrapper">
<div id="head_company"></div><!---end head_company--->
<div id="head_name"></div><!---end head_name---->
<div id="head_search"></div><!---end head_search--->
<div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
<div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
<div id="head_more"></div><!---end head_more--->
</div><!---end head_wrapper--->
And here is the css for it:
#wrapper #head_wrapper {
background-image: url(../images/general/head_bar.png);
background-repeat: repeat-x;
float: left;
height: 44px;
min-width: 100%;
width: auto !important;
width: 100%;
position: fixed;
z-index: 10;
margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
background-image: url(../images/general/navs/arion_co_button.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 84px;
cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
background-image: url(../images/general/hover/company_hover.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 84px;
cursor: pointer;
}
#wrapper #head_wrapper #head_name {
background-image: url(../images/general/navs/arion_logo.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 144px;
}
#wrapper #head_wrapper #head_more {
background-image: url(../images/general/navs/head_more.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
}
#wrapper #head_wrapper #head_more:hover {
background-image: url(../images/general/hover/head_more_hover.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 40px;
cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
background-image: url(../images/general/navs/head_settings.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 73px;
cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
background-image: url(../images/general/hover/head_settings_hover.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 73px;
cursor: pointer;
}
#wrapper #head_wrapper #head_home {
background-image: url(../images/general/navs/head_home.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 72px;
cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
background-image: url(../images/general/hover/head_home_hover.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 72px;
cursor: pointer;
}
#wrapper #head_wrapper #head_search {
background-image: url(../images/general/navs/search_bar.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 327px;
margin-right:15px;
background-position-y: 5px;
margin-left:31%;
}
Thanks for any and all help