Loading...

Making the Header of your GROU.PS Network Static/Fixed!

Tags: static header
Making the Header of your GROU.PS Network Static/Fixed!
making-the-header-of-your-groups-network-staticfixed
LAGbook.com 1 day ago
ActivityRank: 14
Are you using the Cosy or The Book template or any similiar template powered by GROU.PS 2.0 for your GROU.PS network? Have you ever wonder how you could make the header of your GROU.PS network fixed or static (as seen on Facebook or LAGbook), while other elements on your network moves along as you scroll?

If your answer is yes, then this tutorial is for you. The solution is right below and pretty simple to implement.

It's a CSS thing so don't get scared. You dont need to alter your Template HTML code or add any complicated Javascript to it. 

Just look for the #header section in your Template CSS - http://<yourgroupname>.grou.ps/admin/looknfeel/edit

It should look like this (if you're using the Cosy template):

#header {
  clear: both;
  background: #0292c6;
  /* customizable.basic.background.20.[Header Background] */

  background: -moz-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #029dd5), color-stop(100%, #0292c6));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#029dd5', endColorstr='#0292c6',GradientType=0 );
  /* IE6-9 */

  background: linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* W3C */

  min-height: 44px;
  box-shadow: 0 1px 3px rgba(82, 108, 118, 0.4);
}

Now add this to the #header section:

position: fixed!important;
width: 100%!important;
float: center!important;
z-index: 900!important;

Now it should look like this after you've added it (The green text is the new elements just added so ignore the coloring. It is done for clarity):

#header {
  position: fixed!important;
  width: 100%!important;
  float: center!important;
  z-index: 900!important;
  clear: both;
  background: #0292c6;
  /* customizable.basic.background.20.[Header Background] */

  background: -moz-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #029dd5), color-stop(100%, #0292c6));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#029dd5', endColorstr='#0292c6',GradientType=0 );
  /* IE6-9 */

  background: linear-gradient(top, #029dd5 0%, #0292c6 100%);
  /* W3C */

  min-height: 44px;
  box-shadow: 0 1px 3px rgba(82, 108, 118, 0.4);
}

Now find the #content section in your Template CSS. There should be two of them.

One of them should look like this:

#content {
  position: relative;
  width: 810px;
  float: left;
  min-height: 450px;
}

while the other should look like this:

#contentWrapper.flexi #content {
  width: 980px;
}

Now add this to both of them:

margin-top: 44px!important;

They should now look like this after the addition of the new element:

#content {
  margin-top: 44px!important;
  position: relative;
  width: 810px;
  float: left;
  min-height: 450px;
}

#contentWrapper.flexi #content {
  margin-top: 44px!important;
  width: 980px;
}

Now save your changes and congratulations, your header is static!

You should have something pretty much like the image below: