Twitter Style Fixed Header using CSS

It would be really tempting to implement Twitter style fixed header menu in your web pages. But it can become a headache for you because of cross browser CSS issues. The bad guy IE always makes the mischief. So I have tried to create a good looking header that looks like that of Twitter. Hope it will help you beautifying you web pages. Take a look at it…

Live Demo Download Script

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebSpeaks.in</title>
</head>
<body>
<div id="head">
<div id="logo">
<a href="#"></a>
</div>
<form style="display:inline;">
<input style="margin-top:3px;" class="searchbox" type="text"/>
</form>
<ul>
<li>
<a href="#" title="Home">Home</a>
<li>
<li>
<a href="#" title="Profile">Profile</a>
</li>
<li>
<a href="#" title="Profile">Messages</a>
</li>
<li>
<a href="#" title="Profile">Who To Follow</a>
</li>
</ul>


</div>
<div id="content">
<div>
<table>
<tr>
<td><a href="http://www.webspeaks.in/2011/02/how-to-hide-add-item-button-magento.html">How to hide 'Add Item' button in Magento Backend Grid</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/02/learn-method-chaining-with-advanced.html">Learn Simple Method Chaining in PHP </a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/02/create-simple-paint-canvas-using.html">Create Simple Paint Canvas using JavaScript</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/01/quickview-my-first-magento-extension.html">Quickview: My First Magento Extension</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/01/disabling-right-click-on-web-pagediv.html">Disabling Right Click on Web Page/DIV, Disabling Text Copy From a Web Page</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/01/google-like-instant-preview-using.html">Google like Instant Preview using jQuery & base64 Image Encoding in PHP</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/01/bubbly-image-gallery-with-jquery.html">Stylish Bubbly Image Gallery with jQuery</a></td>
</tr>
<tr>
<td><a href="http://www.webspeaks.in/2011/01/here-is-simple-script-showing-image.html">Image Zoom Effect with jQuery</a></td>
</tr>
</table>
</div>
</div>
</body>

</html>

CSS Code

html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
/* */
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#logo a {
background: url("twitter_logo_right.png") no-repeat scroll 20px 9px transparent;
color: #FFFFFF;
display: block;
height: 40px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
float:left;
}

.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#head ul {
margin:0;
padding:0;
background:transparent;
height:100%;
margin-left:60px;
padding-left:60px;
padding-top:10px;
}
#head ul li { display:inline;}
#head ul li a { padding-left:20px; color:#BABABA; text-decoration:none;}
#head ul li a:hover { color:#FFFFFF; }

table tr td{height:100px; width:300px; -moz-border-radius:12px; background-color:#C6C6C6; margin:botton:30px;}
table tr td a{color: #007B9F; font-size:1.5em; text-decoration:none;}

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

4 thoughts on “Twitter Style Fixed Header using CSS

Comments are closed.