How to Move a Bar in CSS Against the Horizon

Static headers can be used for menus, copyright information or simple decorative design.

One of the benefits to increasing monitor sizes and screen resolutions is that visitors have more space to spare for your layout elements. An emerging design element is to have a small header that remains static while the rest of the page scrolls, making sure that the name of the site and other menu options remain visible at all times. As of October 2011 this is most noticeably used on Facebook and Twitter. You can achieve this effect using a div element and some CSS to set the position of the element.

Instructions

1. Create your div element on your page. Since this is the only element on the page that will be fixed in place, you can assign it an ID. Your basic element would look something like:

   <div id="headerbar">Content</div>

2. Open your stylesheet and set the z-index of any content elements to a low number, e.g.,

   #content {
   z-index: 1;}

   The z-index sets the layering of the page; the higher numbered index will be on top. By setting the content low, it'll tell the browser to keep the navigation bar on top of the content.

3. Create your class with the positional elements. Without any styling or design, your bar would need the following attributes:

   #headerbar {
   position: fixed;
   z-index: 2
   top: 0px;
   left: 0px;
   width: 100%}

   The important attribute is "position: fixed;" this is what tells the browser that this element is to remain in place while the rest of the page scrolls by. By setting the position of the top and left at zero, the box starts directly in the upper left corner of the page. With the width at 100 percent, the bar fills the width of the user's page. You could see this element to put the bar anywhere. If you wanted to set it along the bottom you use "bottom: 0;" instead.

4. Add any styles to the bar. For instance, if you want your bar to have 20 pixel high Times New Roman font, with a gray background and black text, your overall CSS ID would look like:

   #headerbar {
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%
   background: #A8A8A8;
   color: #000000;
   font-size: 20px;
   font-family: Times New Roman;}

   You can also add defined height, such as "height: 25px;" or any other designs: background images, borders and the like.

5. Save your page and test it in your browser.

Tips & Warnings

• You can add the style attribute to the div element if you don't have access to your website's stylesheet, i.e., <div style="">, with the CSS between the two quotation marks.

• Use discretion in styling your static bar. Because it's always on screen, you don't want to make it too large or obtrusive. Consider also that plenty of visitors are still on the 1024 by 768 resolution.

References

• W3Schools.com: CSS Position Property
• W3Schools.com: CSS ID and Class