Databases
StackOverflow2013
Postsdbo
POFixed header elements move on window reduced
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFixed header elements move on window reduced
    text
    copied!<p>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?</p> <p>Here is the code for the html of the menu header:</p> <pre><code>&lt;div id="head_wrapper"&gt; &lt;div id="head_company"&gt;&lt;/div&gt;&lt;!---end head_company---&gt; &lt;div id="head_name"&gt;&lt;/div&gt;&lt;!---end head_name----&gt; &lt;div id="head_search"&gt;&lt;/div&gt;&lt;!---end head_search---&gt; &lt;div id="head_home" onclick="location.href='overview.php';"&gt;&lt;/div&gt;&lt;!---end head_home---&gt; &lt;div id="head_settings" onclick="location.href='settings.php';"&gt;&lt;/div&gt;&lt;!---end head_settings---&gt; &lt;div id="head_more"&gt;&lt;/div&gt;&lt;!---end head_more---&gt; &lt;/div&gt;&lt;!---end head_wrapper---&gt; </code></pre> <p>And here is the css for it:</p> <pre><code>#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%; } </code></pre> <p>Thanks for any and all help</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload