hide blogger navigation bar

What is Blogger NavBar?

The Blogger Navbar appears by default at the top of every Blogger-powered blog. - Google Blogger Support.

It shows links to take you back to blogger (dot) com, your blogger dashboard, search the blogger blog you're currently viewing, share and promote your content to social websites. View its complete features.

How to remove Blogger Navbar.

To hide, disable, remove or turn it off, follow these simple steps.

1. Go to Blogger and login to your account.
2. From the Dashboard, click DESIGN.

3. Go to EDIT HTML.
4. Search for ]]></b:skin>. Above it, insert the following codes.


#navbar-iframe {
display:none;
}

5. Save Template.

For classic templates, look for </style> instead of ]]></b:skin>.

Display [none] and Visibility [hidden].

In the above tutorial, we used the css property - DISPLAY: NONE.

display: none
With display:none property, it means we are removing the element completely from the document.

difference between display [none] and visibility [hidden]
If display:none deletes the element, visibility: hidden hides the element thus it still takes up space in the whole layout.

To understand more how they vary, see them in action.

Other techniques.

Labnol has blogged about other ways to hide Blogger NavBar. Two of them involve editing the <body> tag. Another is using css. View his techniques. If any of the above methods doesn't seem to work, try his alternative CSS tweaks.