A reader asked me about this recently. What he wanted was to hide the "Home" menu item when on the frontpage of his site.
I must admit I haven't really been in the situation where I'd needed that. Still, there might be others that need the same functionality on their site. So here are a couple of solutions for hiding a menu item on a particular page.
1. HidE the menu module
This is the approach my reader had chosen. The method is quite simple: You add a menu, and move your "Home" menu item to that menu. Then, you add a menu module to your site and choose to display it on all pages except on the frontpage. This is really simple to do in versions of Joomla after 1.6. Of course, this can be done for any menu item on your site.
The reader published this module in the same module position as his main menu, so the "Home" link would appear to be part of the same menu. He chose to hide the module title for the same reason.
The good thing about this method is that it's really simple. You don't need to fiddle around with CSS etc. The challenge is that the two menus might look disconnected. It really depends on your template and how the modules stack up.
2. UsE CSS to hide the menu item
Another approach is to use CSS properties to hide the menu item. In Joomla, every menu item has it's own unique ID (CSS class selector). This means that you can style menu items individually. Perfect in our case!
What you want to do is to use a combination of page class suffixes and CSS to hide the menu item on your page.
Confused? Don't worry, I'll explain in detail!
Add a page class suffix
First, go to your home page menu item. Enter a page class suffix like "frontpage" into the page class suffix field and save. This will create a class in the body tag of your template. What this means is that you can style any element on the page just for the frontpage by using the body tag class.
You can check if this works as expected by looking at your frontpage source code and see if the body tag contains the "frontpage" class. By the way, I always recommend using Firefox and the Firebug add-on to debug and check source code.
In one of my sites (based on a YooTheme template), it looks like this:
<body id="page" class="page sidebar-a-right sidebar-b-right noblog frontpage">
You can see the frontpage class is added to the list of class names for the body tag.
Note: If you're using a low quality template, it might not support page class suffixes. All good Joomla templates should support that, though.
Find the menu item class name
Now, you need to find the menu item class name. To find the class, take another look at the source code. The menu item will look something like this:
<li class="level2 item172">
The item172 class is what you want to use. That's what allows you to style that menu item specifically.
So, in this case, the menu item class is "item172".
Add the CSS
Now, in your template CSS file, add the following:
body.frontpage .item172 {display:none;}
This code will hide that particular menu item when the page class suffix is frontpage. That means you will be able to keep one menu module. One less element to maintain. Obviously, this technique can be used to style other elements on your page, too. Be creative!
