Home

Download this help site
(PDF 80MB)

Download

Menu gadget

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.

Using the gadget's settings, you can control its appearance and content.

 Read more/less

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.

Setting

Description

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(Tinted Tiles only) Controls the horizontal alignment of menu options within vertical menus.

Margins

The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.

Advanced

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.

You can change the colors, text styles, and backgrounds used in your website from the Colors and styles screen.

 Read more/less

For more advanced fine-tuning, you can use CSS customization and theme overrides.

For menu gadgets, you can modify the following elements from the Colors and styles screen:

To change...

modify...

under...

For...

Top-level menu items

Main/Normal

Menu
Navigation gadgets >> Menu 

Blueprint, Clean Lines, Dark Impact, Fiesta, Showcase, Skyline, Treehouse, White Space themes
Firma, Terra themes 
Drop-down menu itemsDrop down

Menu
Navigation gadgets >> Menu 

Blueprint, Clean Lines, Dark Impact, Fiesta, Showcase, Showcase, Skyline, Treehouse, White Space themes
Firma, Terra themes  
Menus itemsItemMenuBusiness Casual, Granite themes
Active menu itemsActive itemMenuBusiness 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, Fiesta, Treehouse, Clean Lines, Whiteboard, White Space, and Dark Impact  – may not proper display more than 3 menu levels.
  • Menus within responsive themes – like Bookshelf and Whiteboard – 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.

On this page: 

See also:

  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7