Ubermenu in use:
run the versions script for latest site info
Enabling Ubermenu
In header.php, if ubermenu is active it will be used, otherwise the default WP menu is used.
(Note: for mobile, the bootstrap menu is used)
Ubermenu 3 Configuration
The UM config is under the WP Appearances menu
- Main / Integration / uncheck Automatic Integration Theme Locations
- General / Responsive & Mobile / Responsive Breakpoint: set to 991 to match Bootstrap SM size
- Main / Responsive & Mobile / uncheck Responsive Menu
- Main / Basic / Skin: disable
- In Main / Submenus / Dropdown Transitions -> slide reveal (or fade or none)
- Main / Responsive & Mobile / Responsive Submenus / Uncheck both Retractor boxes
Configuring the Menus
Flyout Sub-Menus
Typical cascading menu. TF supports 3 levels.
The top level menu item above each flyout menu tree needs to have it’s “Submenu / Submenu Type” set to “Flyout Submenu”.
Mega Sub-Menus
Single sub-menu element containing widgets. So far used for books on thepactinstitute.com and ronarons.com.
The top level menu item needs it’s “Submenu / Submenu Type” set to set to Mega Menu, and it’s “Submenu / Mega Submenu Position” to “Center”.
Below that create an item and in it;s Widgets setting create a widget area name in the Custom Widget Area box. Then in the WP widgets screen add items to it.
Tips
- To remove unused widget areas, in UM setting go to General / Maintenance / Widget Area Manager
- When a Theme is changed the widgets are no longer in the widget area. Fix in the WP Widgets screen – the widgets are at the bottom; drag them back into the Widget are.
- TF has a basic set of styles for flyout and mega menus, with each element a different color. Override the color styles in the child (see andreas site for an example) and keep the rest
- For mega menus, there are menu item setting to control width and posisitoning but they are unreliable. There is some styleing in _tf_uber.less to try and help. Override in child if needed.
- UM has a useful feature for debugging CSS: From the WP admin bar, Ubermenu / Diagnostics, then a little 4-icon menu appears over the menu and you can “pin” it open for easier debugging.