About Position Fixed CSS header

HTML & CSS
1

Hey!

I would like to get some info about how to make a websites header and the body work together.

Example, if I have a fixed header div (always top, moves with the browser scroll, that contains menu and other stuff) and a relative(not fixed) body div.

So the concern: Because the CSS position “fixed” moves over other layers, I have set the body div top margin to 180px(taken count the size of the fixed top header). All looks nice until the fixed top header layer gets bigger like 200px of height, instead of 180px, it covers a little bit of the body div area.

How can I make a body(not fixed position) to follow the header(css position fixed)?

Website layout:
----This is CSS fixed header content(position:fixed)—
----this is sites body, even if the header gets bigger, please don’t go over me—
----this is websites footer—

CSS:

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    clear: both;
    background-color: #0a0a0a;
    z-index: 2;
    display: block;
}
.bodyx {
    border: 2px solid #000;
    border-radius: 5px;
    padding: 10px;
    width: 70%;
    clear: both;
    background-color: #b5b1ab;
    margin-left: auto;
    margin-right: auto;
    margin-top: 185px;
    display: table;
}

Thank you!

2

Hi,

The short answer is that no you can’t naturally move the body below a fixed header unless you script it to do so.

You can fake it a little though depending on content and use media queries to apply greater or lesser padding to the body depending on whether the content in the header has wrapped or not. However that won’t work if the header is a dynamic height, or dynamic content inserted or you have different height headers on different pages.

These days the common approach is to script a ‘sticky header’ which only becomes fixed after you scroll and thus avoids most of the issues associated with fixed headers.

Here’s an example that uses JS to adding padding-top to the body element to move the main content down depending on the height of the header. The routine is also called on resize to allow for fluid content in the header that wraps as the window gets smaller and thus increases its height.

1 Like
3

Thank you for clearing this up!

That is a nice idea, Thank you!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.