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 commented

same here.
any help?

dddbbb’s picture

dddbbb commented

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

dddbbb’s picture

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 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 commented

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


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

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/