How to Add a Fixed Header to Blogger Blog


Read {count} times since 2020

A fixed header is a header that is in a fixed position. It will be seen in your blog wherever you are in your blog. See an example here.

To add this follow these steps

1st Step : Go to Blogger -> Template -> Edit Html

Copy and pate these lines before the tag :

<style type="text/css">
/* Subin's Blog - http://subinsb.com */
.fixed-header{
 overflow: hidden;
 position: fixed;
 z-index: 999999;
 top: 0px;
 left: 0px;
 right: 0px;
 height: <span style="color: red;">76</span>px;
 background: <span style="color: red;">#EEE</span>;
}</style>

2nd Step : Go to **Blogger -> Layout  **and click on  button.

Then Click on  button and type these in the content area

<div class="fixed-header" >
<center><h1>Type Your Blog Name Here</h1></center>
</div>

After typing Click on “SAVE” button. That’s it. You should now see a fixed-header in your blog.