Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save davidperezgar/c7ac1b90a464efd29c3151bd0a12e4ee to your computer and use it in GitHub Desktop.
Save davidperezgar/c7ac1b90a464efd29c3151bd0a12e4ee 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