Custom icons

You can use a variety of different icons for your top level menu items.  However, if none of the standard icons is exactly what you're looking for, you can also use your own custom icon.  Designing a custom icon, especially one that looks good on the menu bar, requires some knowledge of image file types and access to image editing software. 

Icon requirements

The requirements for your custom icon are:

• The width of the icon must be 124 pixels or less.  There is no restriction on the height.
• The file format must be .GIF or .PNG.
• The image should include transparent areas, so that the blue background of the menu bar can show through the icon.

Uploading your custom icon

Once you have an icon that meets the above requirements, here are the steps to use your custom icon on your menu:

• Sign in as Admin.
• Go to your Image library.
• If you do not already have a folder titled "MenuIcons" (one word), create a new folder as follows:
• Click New folder...
• In the Folder name field, type in "MenuIcons" and press Save.
• Click the Upload to this folder... button on the MenuIcons folder.

• Locate your .GIF or .PNG icon file on your computer and upload it.

     Note you cannot update the icon file to a new image. If you want to use a new icon, upload file with different name. 

Using your custom icon

• Go to your Menu system.
• Your new icon will show up in the dropdown for any top level icon menu item.  Choose your new icon.

• Press Save.  Then go back to your main site to see your new icon on the menu.

 Note for the mobile site, if the icon has text then it will be scaled tiny and on left side of menu text. If it doesn't have text it will be scaled to fit menu bar width.

Transparent areas in an icon

In order to look correct and consistent with the other icons on the menu bar, the icon you provide should have transparent areas where the blue of the menu bar can show through the icon.  The .GIF and .PNG image formats support transparency, but other image formats do not.  For example, if our puppy icon above were saved as a .JPG (no transparency), it would appear on the menu bar as follows:

The menu icon will still function properly, but it doesn't look right, especially when displayed along with the other icons.