VIDEO: Using CSS to Customize the Main Menu System in Wild Apricot

The Kaleidoscope theme in Wild Apricot is beautiful! Changing the main menu design though is not something that can be done by pointing and clicking. You need to use CSS to modify the menu. This snippet of CSS code will help you modify the main menu in Kaleidoscope and Bookshelf, two themes that share the same menu styles.

Step 1. Download the CSS code

Step 2. Use the Website > CSS  option to copy and paste the CSS code, or use the WebDAV approach to create or edit the user.css file.

Step 3. Modify the various color and background options to your heart’s content until you have the menu working just like you would like.

Hint: Popular colors are available online at W3Schools. You may wish to use your own hexadecimal colour values that start with #.

About the author

Alex is a pioneer in using the cloud to meet the needs of small and medium sized business (SMBs) and membership-based organizations. He has a BSc in computer science from the University of Michigan and has worked as a product manager at two Internet startups. Alex is a father of 2 and plays the trumpet for fun. He is the founder and the president of the University of Michigan Alumni Club of Toronto.