In the past I used to just hide Blogger’s navbar widget with some CSS code but it was still there being loaded in the HTML code. This approach is inefficient because I really don’t want the navbar. So why should it still be there in the code taking some precious time to load and impacting the user experience?
Figure 1 - Blogger navbar
In my case when I looked at the Layout section of my blog in Blogger dashboard I saw that the navbar section was locked (see the locked=’true’ in Figure 2) which means I could not delete it in the Layout screen. So there’s only one option to really get rid of it and it is through the widget code.
So I was after a way of removing the navbar forever; not just hiding it with CSS. I then found a way of doing it but it didn’t work for me. Blogger redesigned its interface and maybe this is the problem.
Then I just thought: what if I try to select the navbar section code and delete it and hit save on the HTML template – who knows… this can work out. What’s the result: it does work out.
How to do it? Follow these 10 simple steps…
1 - First save a backup copy of your blog template for the case where something goes wrong;
2 - Go to Blogger dashboard and select Template in the menu on the left;
3 - Hit the Backup / Restore button at the screen top right and save a backup copy of your layout;
4 - In the Template screen, click Edit HTML button;
5 - Click the checkbox Expand Widget Templates;
6 - Hit Ctrl + F and find the string ‘navbar’;
7 - Select the section code like the one shown in the following screenshot:
8 - Hit delete on the keyboard;
9 - Click the Save template button in orange. You should get this message:
Figure 3 - Warning message informing that deleting the navbar widget cannot be undone
10 - Click Delete widgets button and you’re done.
Now your page will load a bit faster and this is pretty nice for the user visiting your blog.