How to create a sticky header to your website

Folks,

Are you looking for a sticky header like this for your project? Then you are in a right lay ūüôā

I wont make you confuse with many files which includes js,css and html files. First i will let you know the key which helps to stick always..Its nothing but position:fixed in css.

Excluding this, remaining and all matters for look and feel of your sticky header.

Let me show my simple code that achieves main agenda of our work..

<style type=”text/css”>
body {
 background-color: #CCC;
 margin:48px 0px 0px 64px;
}
div#topdiv {
 position:fixed;
 top:0px;
 left:0px;
 width:100%;
 height:50px;
 color:#CCC;
 background:#333;
 padding:8px;
}
div#bottomdiv {
 #position:fixed;
 bottom:0px;
 left:0px;
 width:100%;
 color:#CCC;
 background:#333;
 padding:8px;
}

</style>

Have this code with your own content in body will show you the sticky header right away. Still if you want more look and feel of it?? you can browse here..good luck ūüėÄ
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