MediaWiki:Gadget-stickyHeader.css
Jump to navigation
Jump to search
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.
html {
scroll-padding-top: 50px;
}
#stickyTop.stick {
--sticky-header-left-margin: 10em;
position: fixed;
top: 0;
margin-left: var(--sticky-header-left-margin);
margin-right: calc(var(--sticky-header-left-margin) + 10px);
width: 100%;
z-index: 500;
background-image: var(--header-background);
background-repeat: repeat-x;
background-position: top left;
background-size: auto 234px;
margin-top: -52px;
}
@media screen and (max-width: 720px) {
#stickyTop.stick {
--sticky-header-left-margin: 10px;
}
}
@media screen and (min-width: 982px) {
#stickyTop.stick {
--sticky-header-left-margin: 11em;
}
}
#stickyTop.stick #stickyTopFlex {
position: relative;
z-index: 502;
}
#stickyTop.stick #left-navigation {
margin-left: 0;
}
#stickyTop.stick #right-navigation {
margin-right: calc(var(--sticky-header-left-margin) + 10px);
}
#stickyTop.stick #stickyTopBack {
position: absolute;
width: calc(100% - var(--sticky-header-left-margin) - 10px);
height: 6px;
bottom: -6px;
z-index: 501;
background: var(--content-border-top-color);
border-bottom: 6px var(--content-background-color) solid;
}
#stickyTop.stick #stickyTopBack::after {
content: "";
position: absolute;
border-top: 6px solid var(--content-border-top-right-color);
border-left: 6px solid var(--content-border-top-color);
z-index: 1;
top: 0;
right: 0;
}
@media screen and (min-width: 1200px) {
#stickyTop.stick.fixedWidth {
width: calc(var(--fixed-width) - var(--sticky-header-left-margin) - 10px);
}
#stickyTop.stick.fixedWidth #right-navigation {
margin-right: 0;
}
#stickyTop.stick.fixedWidth #stickyTopBack {
width: 100%;
}
}