How to add a floating or fixed header to blogger.

Hi! Guys in this post I would like to tell you about ‘How to add a floating or fixed header to blogger.’

The header portion remains fixed while you scroll down the page of your blog. This can be done by making some changes to the style sheet of the template. Don’t worry I am with you throughout this.

But before making any changes to your template please backup it.

Now follow these simple steps:

1. Log in to blogger.
2. Go to template and backup it first.
3. Click on ‘Edit HTML’.
4. Now search for #header or header#masthead or something like this that defines the header portion of the template. You can do the search by pressing Ctrl+F.
5. Add position:fixed; z-index:200; background-color: #fff; to the #header portion of style sheet.
6. This part of the code makes the header portion to stick at the top of the blog and any other content.
7. Now we have to make some changes in the #main portion to prevent the posts from being positioned underneath the header.
8. Search for #main or the portion that defines the main portion of the blog.
9. Add margin-top:200px; to the #main portion of the style sheet.
10. Sometimes you have to make some modifications in the style sheet according to your needs.

If you have any genuine problems regarding this post please feel free to contact.

Print Page

Do you like this post? Please link back to this article by copying one of the codes below.

URL: https://techpro365.blogspot.com/2013/06/fixed-header-to-blogger.html HTML link code: <a href=" https://techpro365.blogspot.com/2013/06/fixed-header-to-blogger.html "> How to add a floating or fixed header to blogger. </a> BB link code: [url= https://techpro365.blogspot.com/2013/06/fixed-header-to-blogger.html ] How to add a floating or fixed header to blogger. [/url]

---

About Author:

Raja Sekhar is the founder of this blog. He has been blogging since 2010 and is an active contributor of many blogs.