Menu gadget

Using a menu gadget, you can add a menu to provide links to site pages.

Within the menu gadget settings, you can control which site pages are included in your menu. If you choose to include all pages, then all your site pages – except those specifically excluded by setting the page position to Not in menu – will be automatically added to your menu.

For some website themes, 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.

(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.

(Casefile and 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 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 change the appearance of top-level and dropdown items, the currently selected items, and items when hovered over.

The options used to customize menu gadget items depend on your website theme.

Bookshelf, Building Blocks, Casefile, Kaleidoscope, Tinted Tiles, WhiteboardHorizontal menu
Blueprint, Business Casual, Clean Lines, Dark Impact, Fiesta, Granite, Showcase, Skyline, Treehouse, White Space
Firma, TerraNavigation gadgets > Menu


  • 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 properly 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:

    .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:nth-child(7) ul { left: auto; right: 0; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:nth-child(7) ul ul { left: auto; right: 100%; }

    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.


About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Powered by Zendesk