Skip to content

Instantly share code, notes, and snippets.

@robneu
Last active March 21, 2017 10:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save robneu/5942223 to your computer and use it in GitHub Desktop.
Save robneu/5942223 to your computer and use it in GitHub Desktop.
Assign the fixed position to your header and set the width to 100%. You'll also need to set a high z-index to make sure your header doesn't get overlapped by embeded objects and other similar items. The second part will make your site look normal when you're logged in and the admin bar is showing.
/*
Site Header
---------------------------------------------------------------------------------------------------- */
/* This is where the magic happens. You need
* to assign a fixed position in order for
* everything else to work correctly.
--------------------------------------------- */
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
/* This will ensure your site looks correct
* when the admin bar is displaying.
--------------------------------------------- */
body.admin-bar .site-header {
top: 28px /* Make this 32px if MP6 is installed */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment