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.

The CSS

Once you have the class name for the category you want to hide from the navigation, simple open your skin’s CSS file for the menu (by default, it’s menu.css), and near the top, add the following rule, updating the #nav in the CSS selector with your navigation’s id attribute value if you have changed it, as well as updating the category-url-key with the one assigned to the category you want to hide:

#nav li.nav-category-url-key {
  display: none;
}

If you still see the category after making this change, you should be sure you’ve reset the system cache as well as your browser’s cache, as they’re both often overlooked. Also, make sure your CSS file was properly uploaded. You can verify this by changing another rule, such as the background color or a prominent element, then checking to see if that element has changed on the frontend after uploading.

If you still see the category in the navigation, even after successfully changing the style of a prominent element, there may be a CSS specificity issue, whereas a more prominent rule is overriding the new one. To resolve this, simply boost the CSS specificity value by adding an asterisk to the beginning of your CSS selector like so:

* #nav li.nav-category-url-key {
  display: none;
}

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.




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs