Skip to content

Instantly share code, notes, and snippets.

@luke3butler
Forked from amitmerchant1990/stylish.css
Last active September 19, 2016 08:42
Show Gist options
  • Save luke3butler/72492aaa68ee9425758ee7869bdf441f to your computer and use it in GitHub Desktop.
Save luke3butler/72492aaa68ee9425758ee7869bdf441f to your computer and use it in GitHub Desktop.
GitHub Fixed Header for better accessibility.
/**
1. Install the Stylish(https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) extension for Chrome.
2. Open up extension options and paste the whole CSS mentioned below.
3. Specify the domain name to be `github.com`.
4. Add a title and save.
*/
@media (min-height: 850px) {
.header {
padding-top: 10px;
padding-bottom: 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
position: fixed;
top: 0;
width: 100%;
min-width: 1020px;
z-index: 99999;
}
div[role="main"] {
padding-top: 49px !important;
}
}
@luke3butler
Copy link
Author

Added a media query so it only takes effect on windows taller than 850px.
Also added min-width on .header to fix its position on smaller width windows.

@amitmerchant1990
Copy link

That's sleek!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment