Is it possible to make the header section fixed?
I tried this css

#section-header {
     position:fixed;
     top:0px;
     left:0px;
     z-index:100;
}

Doesn't seem to work. Did I make a coding error? Or is it even possible with this layout?

Comments

vinoth.3v’s picture

vinoth.3v CreditAttribution: vinoth.3v commented

same here.
any help?

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

I'd also be interested to see if anyone has a good, CSS only solution for this.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

This is working for me so far but I've only tested in Firefox 13 on OS X. You'll need to replace the height and margin-top properties with the actual height of your header.

#section-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 131px;
  z-index: 100;
}

#section-content {
  margin-top: 131px;
}

I too would like to know how reliable this is in other browsers so if you hit any issues and/or have any fixes then please post back here.

vinoth.3v’s picture

vinoth.3v CreditAttribution: vinoth.3v commented

works, but we also have to concentrate the following issues which I have noticed.

  1. Header and menu should have background, otherwise it looks odd when content moving arround
  2. Sticky-table header goes behind the header if the page has tables.
  3. Wrong position of drop down menu. I am using QTip JQuery plugin for the mega menu

works good on chromium @ linux

vinoth.3v’s picture

vinoth.3v CreditAttribution: vinoth.3v commented

seems working if we use padding-top instead of margin-top.


#section-content {
  padding-top: 131px;
}
Vako’s picture

Vako CreditAttribution: Vako commented

Check the following links for doing not only fixed headers, but also footers and static banner of your website:
http://www.jasonglisson.com/creating-fixed-header-region-drupal-7
http://lifeinthegrid.com/simple-css-fixed-header/