Make Fixed Header For Blogger

Geek Gadgets is  one of templates using fixed header style

I have seen a lot many blogs and blogger template providers offer free templates using fixed header style, but it's been a while for me to take interest in experimenting the way how to make fixed header on my blog.
Surprisingly it's not hard (even for beginner like) and to do so we only need to just put some css codes.

Having browsed many tutorials and tried to implement several suggested css codes didn't make me satisfied.
Some of their codes were working, but it resulted awful look of the template header and I found it little bit difficult to modify. No choice except block the codes and press delete button :).

Other suggested codes seemed better, but it didn't prove any enlightenment. Worst of all it didn't work and screwed up the appearance of the template itself.

It was simple finding. When I got stuck with my experiment and returned to may blog dashboard i noticed blogger.com also uses such fixed header menu style.

Instantly I right clicked and pointed the cursor to inspect element drop down options. Here I the codes.

Copied them and pasted on header area. Viola! it worked. Next I did other adjustment on other element.

Here's the step I did to complete my experiment in making fixed header.

• Find     #header {     OR     .header {    or other similar codes refer to the header area.
• Right  after   #header {   OR   .header {     put  these codes :

position: fixed;
left: 0;
z-index: 6;
height: 68px;
width: 100%;
background: white;

Note :  Value 68px  is the height size of your blog header. You can change the 68px to any number adjusted with the size of your blog header.

• Next find     #main {      OR     .main {
• After the     "{"     put      margin-top : 68px.  

68px   is just an example. You may need to change the size / height to match with your header.

Save temple and done.