Creating a fixed header region in Drupal 7

One of the big web design trends in the last year has been fixed headers. They look great (sometimes) and you can do some really creative things with them.



tech-crunch

This article will explain how to make a fixed header that appears after the website scrolls up. Essentially, you’ll have two headers. One fixed, and one scrolling.

When doing this in Drupal 7 you’ll run across several issues:

  1. What CSS changes do you need to make for all of this to work?
  2. Accommodating the admin bar on the top and the fixed header.
  3. How does the fixed header work as a region? How do I create a new region?

CSS

Let’s look at the CSS first. You’ll need to use something like firebug to check where your header region begins and ends. This can vary template to template. Find the line in your stylesheet that has all of the CSS for your header div. Usually begins with .header or .header-wrapper.

Here is the CSS that I used on my site:

#header {
    position: relative;
    z-index: 999;
}

You might also, depending on your template, need to make the header’s width 100% of the page. Or if you want it to only stretch a certain width, then just adjust the width to match your template.

Now, we’re going to go ahead and create the CSS for the new fixed header. We’ll call the new div “fixed-header”. Creative, right?

#fixed-header {
    width: 960px;
    margin: auto;
    position: fixed;
    top: 0;
    z-index: 99;
    text-align: center;
}

Then create the container that the fixed header region will reside in.v You can call this anything you’d like, but just make a note of it.

.top-fixed-area {
    width: 1000%;
    height: 60px;
    margin: auto;
    position: fixed;
    top: 0;
    z-index: 99;
    background-color:#fff;
}

Note the z-index value. That is really what creates the magic here and it’s very simple to alter. You don’t have to use 9’s, I just have a habit of using them. One 9 will be the lowest layer. 99 will appear over that layer. 999 will appear as the top layer. And so on. Makes sense, right?

Fix the Admin Bar

While you’re in the stylesheet, go ahead and adjust your admin menu so that when you’re logged in, it appears over everything:

#admin-menu, #admin-menu ul {
    line-height: 1.4em;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 99999;
}

Create a New Region

Next we’ll need to create a region in Drupal and insert the CSS to make that region work.

Go into your theme folder on your server and open the .info file for your theme. MAKE SURE YOU BACK THIS UP BEFORE DOING ANY EDITS! You’ll notice that these regions coincide with the regions in your block administration page. Insert a line just under the header region called “Fixed Header”. This will be the title that shows up in your block administration area.

    regions[header] = Header
    regions[fixed_header] = Fixed Header
    regions[help] = Help
    regions[page_top] = Page top
    regions[page_bottom] = Page bottom
    regions[highlighted] = Highlighted

Now, open your page.tpl.php. PLEASE remember to back this up. You’ll need to do two things here.

  1. Create the div for the fixed header to “reside” in.
  2. Create the region for the fixed header.

Insert this just before your header div. Should look something like:

<div class="top-fixed-area"></div>

Next create your fixed header region. I’ve done this in a manner so that I have two logos. One logo will be in your normal header, and the other will be a shorter logo tailored to your fixed header height.

<?php if ($page['fixed_header']): ?>
  <div id="fixed-header">
                 <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
    <img src="INSERT YOUR PATH TO THE FIXED HEADER LOGO HERE" alt="<?php print t('Home'); ?>">
  </a>
        <div class="top-header">
    <?php print render($page['fixed_header']); ?>
  </div></div> <!-- /.fixed-header, /#fixed-header -->
<?php endif; ?>

Save this and drop it back in your theme folder then clear your cache.

After refreshing your site, you should see the header appear at the top, and you should have a Fixed Header region in your block administration page.

 

Conclusion

Naturally, you can style this any way that you’d like. I’ve done a drop shadow on the content area before, which looks great. Making the header background transparent looks awesome as well. You can do that by using a transparent PNG as the background. I am doing this type of fixed header on a furniture website that I’m developing right now (pictured above). The logo was no problem, and you can use the module “Menu Clone” to copy your top menu and create a new block to place into your new fixed header region.

That’s pretty much it! Ask any questions if you got ’em. All comments are monitored and approved.