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