How to customize or reduce the size of register trademark symbol

Question

In my magento frontend i am displaying categories in the header navigation, one of the category title is containing register trademark symbol.

Now my question is how to reduce/customize the register trademark symbol in the category title?

From the admin panel i have tried giving html tags like <sup> to the register trade mark symbol which is working fine in header navigation but am displaying the same navigation(categories/subcategories) in the left column the <sup> tag is also displaying along with the symbol.

Or is there any other approach to customize or style my trade mark without using html tags in the category name?

Many thanks in advance :)

Answer 1

In this case Javascript is probably the easiest way to go. Here's a jQuery example of how to do this.

$("ul#nav").find("a:contains('©')").each(function(i, elm){
   var orig_str = $(item).html();
   $(item).html(orig_str.replace('&copy;','<sup>&copy;</sup>'));
});

This code searches the topnav links for an A element containing the copyright symbol (as HTML character code) and replaces the A element html with a wrapped © version.

You might need to tweak the script in case you're using a custom navigation extension or if the © element isn't a HTML character code

Answer 2

I would do it with JavaScript as well. If you don't use a theme with jQuery, here is a Prototype.js version, as Prototype.js is bundled with Magento:

$$("ul#nav a").each(function(item) {
    var itemHtml = item.innerHTML;
    itemHtml = itemHtml.replace('™', '<sup>™</sup>');
    itemHtml = itemHtml.replace('&trade;', '<sup>&trade;</sup>');
    item.innerHTML = itemHtml;
});