Knowledgebase

How to change the font, font size and letter case of items in the top navigation menu in Magento

If you want to change the font family, font size and letter case of the category names and other items that appear in the top navigation menu on the frontend of your Magento site, you can do that by modifying the styles.css file of the theme that you use. You can edit both the top level item and the sub-items that appear when you hover the mouse pointer over an item, you can edit only the top level item or only the subcategories/sub-items in the top navigation menu.

Assuming that your Magento is installed directly in the public_html folder on your Magento hosting account, meaning the frontend is accessible at yourdomain.com, then the path to the styles.css file will be public_html/skin/frontend/default/name-of-your-theme/css/styles.css (of course, you have to replace name-of-your-theme with the actual name of the theme). In that file find the section labeled /********** < Navigation */. You should put the code in that section. You can put the code anywhere in the file, but if you want to keep things tidy that's the section for styling the top navigation.

To change the styling of the name of the top level categories and all subcategories insert a code similar to this string:

#nav li { font-size:15px; text-transform:uppercase; font-family:"Courier New"; }

Of course, you can change the font size to any number you want. If you want the letters to be lowercase replace uppercase with lowercase; if you want only the first letter to be capitalized put capitalize instead. If the font family consists of more than one word you should enclose the name in quotation marks as shown above.

To change the styling only of the subcategories/sub-items in the menu without the top level item use the following code:

#nav ul li { font-size:15px; text-transform:uppercase; font-family:"Courier New"; }

To change the styling only of third level items in the menu (and lower level items) use the code:

#nav ul ul { font-size:15px; text-transform:uppercase; font-family:"Courier New"; }

You can edit the styles.css file from the Files section of the Pixie control panel. Alternatively, you can download it with an FTP client (e.g. FileZilla), edit it with a text editor (e.g. Notepad, Wordpad) and upload it back in the same folder overwriting the old file.

After that clear the browser cache and refresh the frontend of your site to see the result.

Was this answer helpful?

 Print this Article

Also Read