How to Remove and Hide Blog NavBar From Blogspot : Blogger NavBar

---

The Process to Hide or Remove Blogger NavBar

The Blogger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger.

1. Remove and Hide NavBar in Blogger Widget Template

Step1: Sign in to Blogger

Step2: On the Blogger Dashboard, click on the Design link of the blog that you want to disable or remove its Title and Description.

Step3: Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

Step4: Search for the following line of code:

   ]]>

1. Before the line, add in the following line of code:
   #navbar { display: none; }
   or:
   #navbar-iframe { display: none !important; }
2. Click on SAVE TEMPLATE to make the change effective.

2. Remove and Hide NavBar in Blogger Classic Template

Step1: Login to Blogger.

Step2: On the Blogger Dashboard, click on the Template link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

1. 
   

Step3: The Edit HTML page under Template tab should be loaded. If not, go to the tab.

Step4: Search for the following line of code:

</style>

Then, add the following line of code before that line:

#navbar-iframe { display: none; }

The Blogger Classic Template uses iframe to load the NavBar, and styles it with ID named navbar-iframe. The name actually also works for new Blogger Wedget Template too.

Step5: After hiding the Nav Bar in Blogger using Classic Template, there tends to be a gap that replaces the navigation bar. The gap may be white, red, green, blue, or black in color, depends on what is your background color. To remove the gap, find the following code (normally near the top of the HTML):

body {

Add in the following like of code after the body tag:

position: relative;

top: -32px;

Step6: Click on SAVE TEMPLATE CHANGES button when done.