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.
Thank you so much! it works!
ReplyDeleteThanks for the tip. It worked but it is also taking off the name of my blog.
ReplyDeleteHi Oyinlola, you are probably taking too much code out.. More then likely the < title > tags, which don't need to come out in order to remove the menu bar. Thanks.
ReplyDeleteThank you so much!
ReplyDeleteThanks man for this. I just have this annoying message coming up when I try to preview or save
ReplyDelete(Error parsing XML, line 2569, column 3: The element type body must be terminated by the matching end-tag < / body >
Please help
Hi Aboki, looks liike you are taking too much code out. Don't save anything, just try again from the start and don't take out the < / body > tag. Thanks.
ReplyDeleteBro i can't delete menu plz if u have a video aur skype to help me plz :/
ReplyDeleteHi, I don't have either of those things. Just follow the instructions and you will get there in the end!
ReplyDeleteCongrats and thanks, can you post about how to edit social plugins.
ReplyDeleteHi, I'm quite pressed for time at the moment. But soon when I have more free time I'll consider adding it to the list. Thanks.
ReplyDeleteThank you so much, at first it looked really hopeless, but at the end it worked! Now I just have to figure out how to get things that i want to have there to that menu. If you could help me, it would be great, but thanks anyways.
ReplyDeletethanks it was helpful
ReplyDeleteRevert all then some wigdets i.e read more, related posts etc. To be deleted but why navigation menu that we made still there?
ReplyDeleteWhy "revert all" doesn't work to it?