Thread: modify ComponentArt:Menu to change category text to upper case

My category navigation (using "(!menu.Categories0!)" in menuData.xml) works great except that my parent category names shown on the top are too long. Also, I want to show the text in upper case. For example, if my category is titled:
Small Cars & Large Trucks

I want my TopMenuItem to show it as:
SMALL CARS &
LARGE TRUCKS

Notice that the category name is continued on the next line to make it shorter (I'm showing tabs for these) but taller.

How can I achieve this? Is there just a setting I can change on the ComponentArt:Menu control itself or do I need to change the code somehow? If so, where?

you can do this via CSS:

text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */

Find the class you need to apply this to

Thanks. I figured this out already. However, I need to separate the text into 2 lines (need to put a <br> after the first word). When I added "&lt;BR /&gt;" to the text part of the MenuItem, it doesn't split up the name in HTML..."&lt;BR /&gt;" actually gets displayed on the page!!! How can I get the Text of the MenuItem to render properly?

I would like to know how to make the menu items into multiple lines. There are <nobr> tags around the menu items in the component art menu - how can they be removed?

The horizontal top menu or the vertical side menu? Which skin are you using, or if you are using a custom skin which default skin did you mimic?

The horizontal top menu.
It is a custom skin using <ComponentArt:Menu id="PageMenu" mimicking skin_1

Anyone know how to remove <nobr> from the topmenu

Originally Posted by activee

Anyone know how to remove <nobr> from the topmenu

i had to modify 2 files in

Code:

skins\componentart_webui_client\[your_CA_version]

Code:

A573R388.js
ComponentArt.Web.UI.Menu.client_scripts.A573R388.js

i replaced all the occurencies of nobr with span

ps. i also changed the css..
TopMenuItem,TopMenuItem:hover height to 30px and line-height to 18px;