How to hide the "Home" menu item on your frontpage

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:

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!

I regularly scan the unanswered questions in the Joomla forums. Many times, the questions posted have to do with how the output of Joomla is presented. This may have to do with the template, but oftentimes it has to do…

Are you lost? Sorry, but the content you requested could not be found. Did you write the correct address? You have a few options now - don't despair: - Use the top menu to navigate my articles- Visit the sitemap…

Sometimes, you might want to create a Joomla page that is not available through a menu. You only want the page to appear when the URL is entered. This might be a 'thank you' page after form submission, a log…

Last week, I did a post on how to add Javascript snippets to Joomla. The way I did this was by adding module positions to the template. In this post, I will delve deeper into how to add module positions…

Even though Joomla is a great platform as it is, there are times when you will have to alter the core files to fit certain needs. For instance, you can't stand how the elements in Joomla content are put together…

Earlier this week, I explained how to add a link to a PDF file to an article by using the Joomla core installation. This time around, I will show you how to accomplish the same using the File Manager plug-in…

Finding a great template for your Joomla site can be a challenge. There are tons of free Joomla templates out there, but to be honest: Most of them are junk. Finding quality free Joomla templates is important to ensure you…

Recent comments

The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.joomlablogger.net is not affiliated with or endorsed by the Joomla!® Project or Open Source Matters.The Joomla!® logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Joomlablogger.net is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.