My Top Bar is not working well


I added a top bar on my blog. Everything is fine except the overlapping of it. Please check it from the link below: I added the div attribute just below the body tag, that means this will show the div tag content on the top, but it’s not. I think attribute is creating problem. But how did you do that ?? Let me know what I did wrong and the efficient way of adding a top bar. I appreciate the help. Thanks!


Are you talking about that sticky notification bar? If yes then you are asking to how to prevent the blog’s header from hiding itself behind the notification bar. For that, you have to add padding CSS to your blog’s header and here’s how:

Steps are following:

  1. Go to Blogger Dashboard > Template > Edit HTML
  2. Search for .blogouter-wrapper
  3. Below that line, add padding-top: 30px; and save your template. It will start looking just fine!

CSS Preview After Adding Padding:

.blogouter-wrapper {
  overflow: hidden;
  position: relative;
  padding-top: 30px;
  width: 100%;

Thanks! Hope it helped you.


Thanks ! It Worked so well. :smiley: I was just thinking to make space there for the bar , but I wasn’t. I have learned so much with this help. Cheers !!