Remove Menu Bar From Blogger Templates

How to remove the navigation menu bar from some blogger templates.

See the picture below of an expample blogger template that has the menu bar that we want to remove which is highlighted in red.

Have you ever managed to find a blogger template that you really like only to end up not using it because it’s too much work to sort out. A lot of the new fancy blogger templates have many different menus, picture slideshows and different colour themes that are hard to match ads to. You name it, there’s a lot to sort out when you install a new blogger theme with all these different options. If you don’t know how to edit or remove what you don’t want it can be annoying to say the least. Some people, like myself, appreciate these templates looks very good but prefer a more simpler layout to work with that has side navigation and easier colours to match pictures an advertisements to.

To remove the top menu bar just follow the instructions below.

Lets say you have already installed your blogger template. If not click the Design tab > Edit HTML > Press Browse to search for your blogger template location where you downloaded it to your computer. Located the template – press Open. Now press Upload on the edit Template HTML page and your template will be uploaded. At this stage do not press the save button to make the template live. Instead, while on the Edit HTML Template page use your browsers “Find” facility. I’m using FireFox, so all you would press is the “Edit” tab, then “Find”.

Now all you need to do is search on the Edit Template HTML page for a word which is written in the menu bar. Going on the example template above I will search for the word “Business” on the Edit Template HTML page in order to locate the stack of code that we want to remove. Once you find this code you need to remove the whole block as shown below:

<div class=’span-24′ style=’height:44px;’>
<div class=’menu-secondary-container’>

<ul class=’menus menu-secondary’>

<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>

<li><a href=’#'>Business</a>
<ul class=’children’>
<li><a href=’#'>Internet</a></li>
<li><a href=’#'>Market</a></li>
<li><a href=’#'>Stock</a></li>
</ul>
</li>

<li><a href=’#'>Downloads</a>
<ul class=’children’>
<li><a href=’#'>Dvd</a></li>
<li><a href=’#'>Games</a></li>
<li><a href=’#'>Software</a>
<ul class=’children’>
<li><a href=’#'>Office</a>
</li>
</ul>
</li>
</ul>
</li>

<li><a href=’#'>Parent Category</a>
<ul class=’children’>
<li><a href=’#'>Child Category 1</a>
<ul class=’children’>
<li><a href=’#'>Sub Child Category 1</a></li>
<li><a href=’#'>Sub Child Category 2</a></li>
<li><a href=’#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href=’#'>Child Category 2</a></li>
<li><a href=’#'>Child Category 3</a></li>
<li><a href=’#'>Child Category 4</a></li>
</ul>
</li>

<li><a href=’#'>Featured</a></li>

<li><a href=’#'>Health</a>
<ul class=’children’>
<li><a href=’#'>Childcare</a></li>
<li><a href=’#'>Doctors</a></li>
</ul>
</li>

<li><a href=’#'>Uncategorized</a></li>

</ul>
</div>
</div>

Depending on what template you are using the code or menu tab names might be slighty different. But as long as you delete the block of HTML the same as the example above that should be fine.

Once you have removed this code press the “Preview” tab located at the bottom of the HTML code on the Edit Template HTML page. Have a look to see if the menu bar has disappeared. If the menu bar is now gone and everything looks fine within the template then press the “Save Template” button. That should be it.

If you pressed Preview and got an error message back like:

    “Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: The element type “div” must be terminated by the matching end-tag “</div>”.

Don’t panic! Just go back to the Edit HTML page and press the “Clear Edits” tab. It will ask you if you want to Discard all changes – Press OK. This will then revert the template back to it’s original state. If you got the error message you must not have taken all of the code out properly. All you need to do is follow the instructions again above. Find the code again by using the “Find” or “Search” option on your browser. Search the Code for a word which is written on the menu that you want to remove, I used the word “Business”. Then delete the block of HTML code exactly as shown above and then press preview to see if it has worked. If all is good then press Save Template and that’s it.