Completely remove a button from the navbar
Description
This tutorial will show you how to completly remove a useless button (text or/and image) from the navigation bar with Javascript.
Set up
In first, you need to know the ID (#) of the button that you want to remove. To help you, here is a table with buttons, descriptions and ids:
ID (#) | Description | ID (#) | Description | ||
![]() | #i_icon_mini_index | ID of the image Index | ![]() | #i_icon_mini_calendar | ID of the image Calendar |
![]() | #i_icon_mini_portal | ID of the image Portal | ![]() | #i_icon_mini_faq | ID of the image FAQ |
![]() | #i_icon_mini_search | ID of the image Search | ![]() | #i_icon_mini_members | ID of the image Members |
![]() | #i_icon_mini_groups | ID of the image Groups | ![]() | #i_icon_mini_profile | ID of the image Profile |
![]() | #i_icon_mini_message | ID of the image PM | ![]() | #i_icon_mini_new_message | ID of the image New PM |
![]() | #i_icon_mini_logout | ID of the image Log out | ![]() | #i_icon_mini_login | ID of the image Log in |
![]() | #i_icon_mini_register | ID of the image Register |
Once you have found the ID of the image you want to remove, create a new Javascript code by going in your administration panel like this:
> ACP | Modules | HTML & JAVASCRIPT | Javascript codes management | Create a new Javascript
Insert this code in all the pages:
- Code:
<!--- Subject: "Remove buttons on pages" - Copyright 2012 by www.fmcodes.com. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified code. Distribution is not allowed without written consent from FMCodes---!>
$(document).ready(function(){$('#ID).parent().hide();});
You have to remplace #ID by the ID of the image that you want to remove.
After this, a space will probably be created instead of the button. To remove it, insert this code in your CSS:
- Code:
#ID {
margin-left: -9px;
}
Here, you need to rempalce #ID by the ID of the image who is at the left of the button that you removed.
Demonstration

As you can see, the image "Groups" and the text are removed.
Technical problems
![]() | The code was tested on all versions and works with all browsers; If you notice that the tutorial doesn't work for a browser or for a version of forum (PhpBB2, PhpBB3, PunBB, Invision) contact an administrator and we will fill this field with your segnalation. Thanks, the staff |
![]() | For every problem or question please, contact us in the section Support for the tutorials, The staff will answer you as soon as it is possible... |
Friendly,
The team of the Forum of Codes.