Hide Categories from the Navigation with Pure CSS

Last modified by Scott on Thu, June 24, 2010 16:50
Source|Old Revisions  

This is an old revision of the document!


The Simple Solution

There have been other, more-detailed methods of keeping categories out of the navigation bar, including one that uses CSS, however that one requires some coding that goes a bit beyond “simple”, at least in comparison to this method.

By default, Magento’s category navigation is hard-coded. This makes it very inflexible. And until they replace or extend it to be a bit more usable, without hard coding HTML on the core, if we want simple modifications, we can make small leaps with CSS alone.

When Magento hard-codes the HTML for the category navigation, it adds a class to the element that allows you to identify and style that navigation item. The structure of that class is of the following syntax:

nav-category-url-key

In this example, the “nav-” is static, it’s always going to be there. The “category-url-key” however will be the exact key used by Magento for that category. Typically though, it is automatically created, being derived from the category name, using lowercase characters and dashes instead of spaces.

If you don’t know the category url key, you can find it a number of ways:

  1. The easiest is to simply look at the source code, and look for <li class=”... nav-category-url-key ...”> where the class name itself will be used in that navigation item’s li tag.
  2. Another way would be to click on the category in the navigation, and inspect the url segment for that category, which follows the store url and if a subcategory, would follow a parent url segment.
  3. Finally, you can always locate the url key by going to Catalog > Manage Categories in the admin panel, then clicking on the category you want to hide from the navigation. The URL key should show up on the management page for that category.

Uses for Hiding a Category

In many cases, categories are used within Magento to hold featured products and special offers, as these features can quickly be created and managed by setting them up to perform such a task. However, store owners will often already have a separate connection to that section of the store, typically through a callout graphic linked to it. Therefore they may now want to display that feature in the category navigation.