Responsive Fixed Header with CSS

[sunsetsam]

Goal: Trying to make a simple and responsive layout. I am able to make the #container and #content responsive, but the fixed #header remains in-place and overflows when resizing the browser window. Is there anyway to have a centered, fixed, header at a specific length, that is responsive? If you resize the browser window by pushing it to the left, you will see what I am talking about. I feel like the solution is simple and only requires CSS?

Also, side question: If I were to add an Image in the header, would the same (potential) solution apply? If you’re curious about this kind of lay-out, I am trying to edit my “Tumblr” layout and I want to make it responsive (it’s a private tumblr blog that I experiment on, I am not trying to make it responsive on cell phones / tablets – yet.)

Here is the JSFIDDLE: http://jsfiddle.net/yrbvw473/2/

<div id="container">
    <div id="header">This Is The Header</div>
    <div id="content">
        <div class="post">
            <p>A</p>
            <p>A</p>
            <p>A</p>
            <p>A</p>
        </div>
        <div class="post">
            <p>A</p>
            <p>A</p>
            <p>A</p>
            <p>A</p>
        </div>
        <div class="post">
            <p>A</p>
            <p>A</p>
            <p>A</p>
            <p>A</p>
        </div>
    </div>
</div>

#container {
    border: 0px solid;
    max-width: 640px;
    padding-left: 50px;
    padding-right: 50px;
    margin: auto;
    display: block;
    overflow-x: hidden;
}
#header {
    top: 0px;
    position: fixed;
    background-color: grey;
    width: 642px;
    z-index: 1;
    text-align: center;
    display: block;
    
}
#content {
    width: 100%;
    overflow-x: hidden;
    clear: both;
    border: 1px solid;
    margin-top: 50px;
}
.post {
    margin-bottom: 45px;
    width: 100%;
    border: 1px solid;
    margin-top: 50px;
    text-align: center;
}

Thank you!

[Paulie_D]

The fixed header can’t be responsive with a fixed width but it’s easy enough to center

#header {
    top: 0px;
    left:50%;
    margin-left: -320px;
    position: fixed;
    background-color: grey;
    width: 640px;
    z-index: 1;
    text-align: center;
    display: block;    
}

http://jsfiddle.net/yrbvw473/5/

For responsiveness, just throw in some media queries

[Paulie_D]

You can make it slightly more responsive by giving a width of 100%..with a max-width (again, you’d have to use media queries) and using transform to center it.

#header {
    top: 0px;
    left:50%;
    transform:translateX(-50%);
    position: fixed;
    background-color: grey;
    width:100%;
    max-width: 640px;
    z-index: 1;
    text-align: center;
    display: block;    
}

http://jsfiddle.net/yrbvw473/6/

[burr]

If you set

#header {
    max-width: 640px;
    width: 100%; 
}

and remove the padding from #container you get some results, but its still not desirable.

The problem with position: fixed is that it takes the element out of the document ‘flow’ so it wont respect the padding applied to its parent.

Some things you might want to look at:
Positioining
Persistent Headers

[burr]

@Paulie_D bet me to it :-)

[sunsetsam]

This works to an extent! It is responsive, but obviously I would have to remove the position: fixed; . Is there a way to have a responsiveness for a sliding header? Is the only way JS and/or Media Queries?

[burr]

Sorry, the code I posted was ment to be added to your code, so still keeping position: fixed;.

Did you look at Paulie_D ´s answers and examples?

[sunsetsam]

Ah. Interesting. So when the page size is altered, the header transforms. In theory, is it possible to have a fixed header, centered, at 100% width?

Also, do you have any good places that show how to use media queries for fixed sliding headers?

[Paulie_D]

the header transforms

Not exactly…the ‘transform’ merely makes sure it’s centered regardless of it’s width.

The width is actually changing.

is it possible to have a fixed header, centered, at 100% width?

Of course, that’s the more popular choice. Just set it to 100%.

You should, ideally, center the content of the 100% wide div/header rather than the header itself but there are multiple techniques for doing that.

fixed sliding headers?

It’s not a popular option….most fixed headers are 100% wide as I said.

With the media queries you are only concerned about the width of the header (or max-width depending on which way you go about it) and any margin (if that’s the way you go).

A quick google search will find you lots of examples of how to use media queries.

[modiophile]

I’m working on a similar problem, the only caveat here is that my fixed header must also occupy a responsive height, see http://jsfiddle.net/ajggs7g8/

The only way around this is to use something like the matchHeight jquery plugin, whereby the parent div will dynamically assume the tallest height of its child. Would there be any other way around this without the use of js?

[ponteha]

@sunsetsam Actually Paulie_D answer for having a fixed header positioned in center helps enough. But as far as I understood, you need a more comprehensive responsive header, right? If so, you probably need JavaScript too, so that it can help you e.g. collapsing the header menu items, etc…

So you may like to checkout this library: https://myflashlabs.github.io/24component-bars/

It is a nice package combination of jQuery plugin and a CSS framework for creating bars. It helps you in creating responsive header, footer, sidebar, etc…

@modiophile If I got you right, you need your header height to be responsive according to its content… So you can easily set your header height to auto height: auto;.

NOTE: It is also a good practice to set a max-height for your header to in mobile view, just like what Bootstrap did for its Nav component. Because your header is fixed, if its content is so long, then it is possible that it will not be shown completely in the user view-port in mobile displays…

.header {
  postion: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 340px; /* Have a max-height */
  overflow-y: auto; /* To have a scrollbar if needed */
}

@media (max-device-width: 480px) and (orientation: landscape) {
  .header {
    max-height: 200px; /* Lower the max-height for smaller devices */
  }
}

@media (min-width: 768px) {
   .header {
    overflow-y: visible; /* Reset overflow in large displays */
  }
 }

[Author]

Posts