Using a menu gadget, you can add a menu to provide links to site pages.
For some website themes – Treehouse, Clean Lines, White Space, and Dark Impact – both horizontal and vertical menu gadgets are available. For other themes, whether the menu is horizontal or vertical is determined by the theme.
Since navigation is a critical aspect of an effective website, you should include a menu on most (if not all) of your Wild Apricot pages. Menu gadgets are included by default on most page templates, so that pages based on the templates automatically display the menu. For instructions on inserting, moving, and deleting gadgets, see Gadgets.
You can control the order of menu options from the Site pages screen, and control whether a page appears in the menu from its page settings. You can customize the colors, text styles, and backgrounds used in menu gadgets from the Colors and styles screen.
Menu gadget settings
Using the gadget's settings, you can control its appearance and content.
For instructions on displaying gadget settings, see Gadgets.
The following settings are available for menu gadgets. Some settings are not available for all website themes.
Pages to include
Choose the pages to be included in the menu. You can include all menu pages, only pages at the top level of the menu hierarchy, or only subpages under the parent of the currently displayed page. For example, if a visitor is viewing one of 3 subpages under the About Us page, then the Subpages under top level parent page option would display a menu consisting of the 3 subpages.
|Gadget style||(Not available for all themes) Determines the physical appearance of the menu. For Terra and Firma themes, the Sticky style causes the menu to stick to the top of the page once it reaches the top of the browser.|
|Align||(Building Blocks, Tinted Tiles only) Controls the horizontal alignment of menu options within vertical menus.|
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.
|Padding||(Kaleidoscope themes only) The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.|
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Advanced gadget settings.
Changing colors and fonts
You can change the colors, text styles, and backgrounds used in your website from the Colors and styles screen.
For menu gadgets, you can modify the following elements from the Colors and styles screen:
Top-level menu items
|Blueprint, Clean Lines, Dark Impact, Fiesta, Showcase, Skyline, Treehouse, White Space themes|
Firma, Terra themes
|Drop-down menu items||Drop down|
|Blueprint, Clean Lines, Dark Impact, Fiesta, Showcase, Showcase, Skyline, Treehouse, White Space themes|
Firma, Terra themes
|Menu items||Item||Menu||Business Casual, Granite themes|
|Active menu items||Active item||Menu||Business Casual, Granite themes|
Any changes you make will be applied to other gadgets that use the same settings.
- You can create as many levels of menu options as you wish, though older themes – those other than Blueprint, Bookshelf, Building Blocks, Clean Lines, Fiesta, Tinted Tiles, Treehouse, Whiteboard, White Space, and Dark Impact – may not proper display more than 3 menu levels.
- Menus within responsive themes will not display more than 3 menu levels on mobile devices.
When using the White space website theme on low resolution displays, child menu items may not fit on the screen if the parent item already appears close to the right margin of the screen. To correct this problem, you can either move the parent item and its children further to the left, or you can add the following code to the CSS customization screen :
where both occurrences of the number 7 in the code should be replaced by a number indicating the parent item's position within the menu order. For example, the home page would be indicated by a value of 1, and the option to its right would be indicated by a value of 2.