How to Add Professional Floating or Fixed Header In Blogger - PAKLeet

 

Being a Blogger, we try our best to make our blog more professional than others and want to add more functionality to our blog. Sometimes we change our blog template because of some faults in it. One of them is floating header, yeah it is the best way to add more professionalism to your blog. In floating header, the header portion remains fixed on its place while you scroll down to the page and you can also make the header in two parts to add floating advertisements and also you can add menu or pages list to that area. This can be apply by adding a little piece of CSS to your blog template. So lets start the tutorial.

How to Create Floating Header :

1. Log in to blogger.

2. Select Your Preferred Blog and Go to template and backup it first.
3. Click on ‘Edit HTML’.
4. Now search for #header  , .header or something like this that defines the header portion of the template. 

You can do the search by pressing Ctrl+F.

5. Add below CSS to the header section or below the header tags.

position:fixed; z-index:200; background-color: #fff;

6. This part of the code makes the header portion to stick at the top of the blog and any other content.
Now we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header.

7.Search for #main or the portion that defines the main portion of the blog.
8. Add

margin-top:200px; 

to the #main portion of the style sheet.

Sometimes you have to make some modifications in the style sheet according to your needs.

Final Words:

I hope you successfully made your blog header sticky by using this method. If you face any difficulty regarding this, drop a comment below till then Peace, Blessings and Happy Floating.