Skip to content

Snippet: Purely CSS Fixed Header Style One

The Total theme's sticky header is very complex as it takes in a lot of data because Total allows for control so for example if a user wants content above the header the theme needs to account for that. It also needs to account for any changes in header height or the height of the content before it as the browser is resized. Or if a user wants to add some sort of javascript in the header, the theme also accounts for that. If you have a very simple site you can disable the built-in fixed header function and use a purely CSS method of fixing your header. The example below assumes you have the topbar enabled, if not, simply tweak accordingly.

/* Give topbar fixed height for offset and also a fixed position */
body #top-bar-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 35px;
    z-index: 99
}

body #top-bar {
    height: 35px;
    line-height: 35px;
    padding: 0;
}

/* Give header fixed height and sticky */
body #site-header {
    position: fixed;
    height: 100px;
    width: 100%;
    top: 35px; /* Offset topbar if enabled otherwise enter 0 */
    z-index: 99;
}

/* Offset outerwrapper */
body #outer-wrap {
    padding-top: 135px; /* Offset header height and topbar height */
}
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top