Magento – Add A Custom CSS Class To Main Menu Link

csstoplinks

Is their a way to add a custom class to one link within the main navigation?

For example I would like the category "SALE" to be coloured red and be bold.

Is this possible?

Many Thanks

Best Answer

Each menu item has a unique class name nav-1, nav-2, nav-1-1. Use those ones.
Check what nav class your menu item has using firebug.

Related Solutions

Magento – way to add a class name to a category link

Sadly changes to the Catalog Navigation are not that easy. The function that does all the work is Mage_Catalog_Block_Navigation::_renderCategoryMenuItemHtml

This adds the category link with the following lines:

$html[] = '<a href="'.$this->getCategoryUrl($category).'"'.$linkClass.'>';
$html[] = '<span>' . $this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';

I would suggest that the best way to do this would be to create a module that rewrites this class you you could change these lines to meet your needs.

JavaScript – How to Add CSS Class on Scroll

For common Jquery errors, check if following steps are carried out:

Have you checked the console of your browser for any errors that might have occured.
Magento does not include jquery by default. Have you included it?
Magento requires jquery.noconflict script to be added at the end of the jquery scripts. This stops the conflict between jquery and magento's default prototype.
After including jquery.noconflict, I recommend not using the "$" sign for accessing jquery variables. Try using jQuery instead of $ everywhere.

Best Answer

Related Solutions

Magento – way to add a class name to a category link

JavaScript – How to Add CSS Class on Scroll

Related Topic