User:Waldyrious/vector.css/fixednav.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* #mw-page-base is the top-page gradient (white on top, light grey on bottom)
#mw-head-base provides the top border of the content box.
it needs to be separate from the top gradient,
because it doesn't fill the whole width of the page.
*/
#mw-page-base, #mw-head-base, div#mw-head {
position: fixed;
width: 100%;
top: 0;
z-index: 2;
}
#mw-head-base {
margin-top: 0; /* default margin-top is -5em to compensate the gradient div.
since we fix its position (it will stay at top:0), we need to remove that now */
}
/* make main content area start after the top nav */
div#content {
padding-top: 6em;
}
/* make content text start (roughly) after the heading & its shadow */
#bodyContent {
margin-top: 4em;
}
/* fix page title too */
#firstHeading {
position: fixed;
z-index: 1; /* allow it to overlap elements that come after it in the DOM */
background-color: white; /* give it some opaque background with which to overlap other elements */
width: -webkit-fill-available; /* browser prefix, see https://caniuse.com/mdn-css_properties_width_stretch */
width: -moz-available; /* browser prefix, see https://caniuse.com/mdn-css_properties_width_stretch */
width: stretch; /* stretch to available width */
margin-right: 1rem; /* don't stretch all the way to the right end of the container */
top: 5rem; /* make it start after the top elements */
padding-top: 1rem; /* replicate #content's top padding. note: needs to be padding because margin is transparent */
box-shadow: 0 10px 10px -10px #0003; /* draw a shadow to hint that the content is sliding under it */
}
/* fix left sidebar */
div#mw-panel {
z-index: 2; /* this is enough to overlap the headers because the sidebar is defined after them in the DOM */
position: fixed;
top: 0;
overflow-y: auto;
height: 100%;
box-sizing: border-box;
border-top: 160px solid transparent; /* this would be neater using margin, but alas, box-sizing:margin-box doesn't exist yet. */
}
/* fix logo */
#p-logo {
position: fixed;
top: 0;
}
/* allow anchors from the TOC to be correctly jumped to
instead of getting behind the top nav bar */
span.mw-headline {
padding-top: 9rem;
}