How you can hide the Home menu item?

Why you should want to do that? Dunno, but it's an evergreen question asked time-to-time from the first day I started to work with Mambo..., so let's take it methodically, to see how one can solve this problem!

The CSS solution

In Mambo/Joomla 1.0 you where basically out of luck. The first published item in Main Menu by default was the site's Home menu. And to have a working site publishing one menu called Main Menu with at least one publicly available menu item was mandatory. The only solution here was to use some CSS trickery to hide the menu items.

Basically there where two techniques used, both are working even in latest Joomla versions, with some twists.

a. The Image Menu based solution

Don't want to insist on details, short version is, that you needed to use an image-menu for your Main Menu, and you assigned a very different image for your Home (default) menu item: your logo, or for example an 1 pixel wide transparent gif ;)

b. Using the CSS to hide the default menu item

More, than one variations of the trickery where invented, but basically all relied on the following concept:

  • you had to assign in some way a specific CSS 'id' or 'class' for the home menu item (note, that the CMS back then has no genuine, built in support for that) probably by using a custom menu module or other similar solution, as a JavaScript snippet to add the CSS hook on the fly to it
  • then you have to assign to that specific 'id' a CSS rule to hide it

Let's say the home menu item has the 'id' set to 'homemenu', then the CSS code to hide it probably looked like:

.homemenu {display:none;}

Later some popular menu modules where released, which where added by default the menu ItemID as a class ID to the output, so your menu code looked something like

<li class="level1 item12"></li>

So all what you needed to do is to check the output and identify the right format. In the above case, as you might guessed already, the CSS snippet looked like

.item12 {display:none;}

This became a norm later, today most menu systems are adding the ItemId to the output. More, with the arrival of Joomla 1.5 you can add a Page Class to any menu item, individually. So, all what you need to do since Joomla 1.5 is to go to the menu manager, choose the default menu item, enter in the editing interface, in the right pane go to the Page Display Options tab, and add to the Page Class box whatewer you want... as "homepage". This information will be added in the output of the page, the output of the page will look like

<body id="someid" class="someotherselectors homepage">

So, if you want to extend the above trick to hide the Home menu item only when you are on the homepage, then you need to add to the above CSS snippet this extra info:

.homepage .item12 {display:none;}

But with arrival of Joomla 1.5 your chances where looking better, a new solution arrived.

The module based trick

The new solution relies on the fact that ANY menu item from ANY menu can be designated as the default, Home menu item. The ideea behind this is to create a special menu with only one menu item in it, designate that menu item as the Default and use the Module manager to choose where this should be shown. But be aware of a limitation here! You can't just unpublish the respective menu module, because the Home menu item still need to be published... Looks like the catch 22 situation, right?

Fortunately the situation is not that dramatic, you have at least 2 workarounds here:

  • to use the above described CSS trick, adapted to this scenario to hide the module output
  • to publish the menu module in an existing module position which is not shown (for example being in a DIV styled via CSS to not be shown)

Publish the module in an non-existing module position

If you wanted to hide the module from ALL pages, without CSS trickery the solution was very simple: in module manager you can type in any module position name - even ones not existing in the template! So, all what you need to do is to publish that module in such a position. With Joomla 1.6+ this limitation (to have the default menu item published and shown) was lifted, so you have another solution at your fingertips.

Use the module manager to publish your menu module only on pages you want

Simple, eh? You create a new menu as described above, publish it, and in module properties select the pages you want to be shown! so, as you can see you have more, than one solution to hide/show the default menu item on your Joomla page, without advanced knowledge. Use your imagination, to invent new ones.