Tip: How do I remove the Blogger bar at the top of my site?

This is, far and away, the #1 question we're asked when people see the work we've done with Blogger. "How did you remove the Blogger bar at the top of the site?!?!"

The secret: we didn't remove it, we just hid it!

Method #1
Be forewarned, this requires that you look at the HTML code of your Blogger template.

Go to the Design tab in your Blogger Dashboard, and click on "Edit HTML". Search the page (ctrl-F) for "body {".

It'll look something like:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

On the line below that code, paste the following:

#navbar {
 height:   0px;
 visibility:  hidden;
 display:  none;
}

Save the template by clicking on the button at the bottom of the page and you should be all set!

Method #2

Go to the Template page in your Blogger administration panel, then click the "Customize" button. Click on "Advanced" in the options, scroll down in the secondary list to "Add CSS", then add the following code:

#navbar {
 height:   0px;
 visibility:  hidden;
 display:  none;
}


Then hit the "Apply to Blog" button in the top right corner and you're all set!

Comments

  1. Thanks so much for this helpful tip and the others on this site. I found you guys as part of my research for the post, "7 Simple Ways to Make a Blogger Blog Look and Act Like a Website": http://bit.ly/yopDvw

    ReplyDelete
  2. Nice and easy. Thanks for the good, simple guidance.

    ReplyDelete
  3. It works too when you put the code in the Blogger Template Designer -> Advanced -> Add CSS.

    ReplyDelete
  4. Hi Teddy, you're 100% correct. I must admit that I never use the Template Editor, so until recently, never knew that there was a Advanced -> Add CSS ability! I've always just gone in and edited the HTML directly.

    ReplyDelete
  5. If you add this to HTML dircetly it appears to wipe the add CSS history... it's all still in the template but unlike before where you could see a history of changes, you can't anymore.

    Strange that it would happen that way but just commenting in case it happens to someone else and they panic.

    Thank you for sharing this tip!

    ReplyDelete
    Replies
    1. Yes, if you edit the CSS in the Edit HTML (rather than in the Advanced section of the Template Designer), any CSS added will disappear from the Template Designer. It doesn't disappear as such, rather it becomes hard-coded in the template html code (it appears right before the closing b:skin tag).

      Delete
  6. Hmmmm, I used the first method but unfortunately the code you advised would be there was nowhere to be found. Then I used the second method of adding CSS and that didn't work either.

    I notice Blogger has recently added a +1 button to the Blogger bar. Could this have upset the code slightly and be the reason why I can't seem to hide it?

    ReplyDelete
    Replies
    1. Hi Skip, no need to search for the code; go to the Add Custom CSS and insert the following:

      #navbar {
      height: 0px;
      visibility: hidden;
      display: none;
      }

      (I had a typo)

      Delete
    2. Thanks for taking the time to reply David. I honestly have no idea why it isn't working. I added the CSS code once again, just to be sure but It's not removing the bar.

      I wonder if it's maybe one of the alterations I made to my blog's code that is now coming back to bite me!

      Delete
    3. So.... new Blogger changes have rendered this tip moot!

      Go to your Layout page in your Blogger dashboard.

      Click "edit" on the navbar element in the Layout editor.

      Choose the option "off" and hit save!

      Delete

Post a Comment