BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
All the tricks, hacks and treats while enjoying your breakfast.

Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

hide blogger navigation bar

What is Blogger NavBar?

blogger navigation bar

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.

how to disable blogger nav bar

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

#navbar-iframe {

5. Save Template.

how to remove blogger navbar

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.

Related Blog and Articles.
How to Hide or Remove Blogger Navbar
What's the difference between display: none and visibility: hidden?
What is the Navbar?
share. comment. subscribe. link.




Copy below HTML link to quickly create a link to this post.

back to share

about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.

about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.