You are here:Home » Blogger Guide » How to Add Fixed, Floating or Sticky Header

How to Add Fixed, Floating or Sticky Header

Every webpage designer want to give new look to his web page. Here if i talk about blogger, every blogger want to give new look to his blog. By Changing look of his blog and by adding more features and functionality. This is the nature of every blogger or web designer.

So here, i am going to talk about how to make fixed or sticky floating header bar on web page or blogger template. By using simple CSS trick. This one of the best way to add more professionalism to your blog. The header will remain fixed, while scrolling the page the header will also scrolled down. This means you can add lots of feature on it for that you can use your own creativity.

Add floating or sticky header,

  • Log in your blogger account. 
  • Now go to your dashboard and select for template. 
Note: before doing all changes, make backup of your blogger template. That will be better idea to save previous code. 

  • Then after go for Edit HTML to change codes. 
Add Fixed, Floating or Sticky Header
  • Now you will get the bunch of HTML, CSS, JavaScript codes. Here you have to search for common ID or CLASS of CSS by pressing CTRL+F, #header or . header then after  you need to add below code to make you header sticky, floating or fixed whatever you wanna call. 
position:fixed; z-index:999; width:100%; background-color:#fff;
  • Take a look on this example, in my blogger template i have found  ID #myheader, your may be #header or class .header, and i added these codes and that's it my blogger or webpage header is fixed now. When i scroll down the header will also scrolled down. 
div#myheader {
position: fixed;
z-index: 500;
background-color: #fff;
width: 100%;
  • Sometime this makes problem, this can cause some of the blogger content hide, i.e see below figure. To solve this problem you need to change few codes. You can search for #main or .main and add below code. That's it. 
margin-top:100px; or margin-top:200px;, or padding-top:100px; or padding-top:200px;
Add Fixed, Floating or Sticky Header