How To Add Top Navigation menu (Bar) To Blogger (blogspot)

Every blog hosted on blogspot.com sub-domain or on a self-domain, has a top navigation bar. This navigation bar allows to search the blog, flag the blog, that is to notify blogger about the objectionable content on the blog, to go to a random blog by using ‘next blog’ link, and to sign in to your blogger account and visit your blogger dashboard.
However, most of the bloggers feel the top navigation bar useless and want to get rid of it. Some of the institution blogs may also want to remove the top navigation bar so that their students may not got to some unsuitable blog by using the “next blog” link. Whatever the need may be, but there is a large section of bloggers wanting to get rid of thattop navigation bar and in this post, I will sow you how to get it done.


Hiding ‘navigation bar’ in classic blogger template:
1. Login to Blogger
2. Click on layout link.
3. Click on ‘Edit HTML’ tab.


4. Search for the following line of code:
</style>

5. Add following line of code before </style> :
#navbar-iframe { display: none; }
This will hide your navigation bar. The Blogger Classic Template uses iframe to load the Navigation Bar, and styles it with ID named ‘navbar-iframe’. The name actually also works for new Blogger Widget Template too.

6. After remove navigation bar, there tends to be gap which may be of red, white or any other color depending on your blog background. To remove this gap, find following code:
body {
Add the following line of code after body {
position: relative; top: -32px;

7. Click on “Save Template Changes” when done.
Hiding ‘navigation bar’ in Blogger Widget template:
1. Sign in to blogger.
2. Click on “layout” link.
3. Click on “Edit HTML” tab.
4. Search for the following line of code:
]]>
5. Before the code place the following line:
#navbar { display: none; }
or
#navbar-iframe { display: none !important; }
6. Click on “Save Template Changes” button when done.

Hiding ‘navigation bar’ in blogger blogs published via FTP or SFTP:
1. Login to blogger.
2. Click on “Layout” link.
3. The “Edit HTML” tab will be loaded automatically. . Click on the drop down box beside “Change the Blogger NavBar” and select “off”.
4. Click on “Save Template Changes” when done.