CSS – Sticky header

I have a posted about sticky footer for the Omega theme.
Drupal 7 – Apply sticky footer in Omega theme

Today, i would like to share how to apply sticky header through simple CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Sticky header - Eureka!</title>
    <style type="text/css">
      #header {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 80px; /* MODIFY THIS VALUE TO FIT YOUR NEED */
        z-index: 9999;
        background-color: red;
      }
      
      #content {
        padding-top: 80px; /* SAME AS #HEADER HEIGHT */
        height: 1200px; /* FOR EASIER VISUAL ONLY */
        background-color: green; /* FOR EASIER VISUAL ONLY */
      }
    </style>
  </head>
  <body>
    <div id="header">This is header region.</div>
    <div id="content">This is content region.</div>
  </body>
</html>

 

See what you get.
css-sticky-header
 

If you are working on Drupal 7 Omega starterkit theme, just simply use the following CSS.

/* STICKY HEADER */
#section-header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px; /* MODIFY THIS VALUE TO FIT YOUR NEED */
  z-index: 100;
  background-color: white;
}

#section-content {
  padding-top: 80px; /* SAME AS #SECTION-HEADER HEIGHT */
}

 

If you are looking for a more advanced solution, you can refer the post written by Jason Glisson.
JasonGlisson.com | Creating a fixed header region in drupal 7

Done =)

Reference:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s