Menus
Mega Menu | Adding the Mega Menu to a site
In order to activate the Mega Menu for a website, an administrator who has access to “plugins” will need to activate it on the site. Once it is activated, the “Mega Menu” should be listed as an option in the sidebar of the dashboard.
Once the Mega Menu is activated, in the dashboard sidebar, go to Divi > Theme builder and open the “Global Header” on the box labeled “Default Website Template”.
- If needed, create a section and row for the menu. If they are already there, then create or use the code module that contains the menu.
- Add the follow code maxmegamenu location=primary-menu
IMPORTANT: The square brackets that are red here will need to be added manually. The red brackets here, are decorative because adding them as html would insert the sites navigation here. - Add or use the separate code module that is intended for “additional styling”. The intial styles are created in the Mega Menu in the dashboard.
Mega Menu | Adding aria-labelledby to the nav
The Mega Menu <nav> tag lacks the attribute of aria-labelledby, which needs to be there for ADA purposes, so it needs to be added manually using Javascript.
In the WP dashboard, go to Divi > Theme Options > Integration
With the “Integration” tab selected, go down to the second code box that is labled on the left with “Add code to the <body> (good for tracking codes such as google analytics). Add the following Javascript in this box.
It would be beneficial to type the code above into a text editor and save it for future use. The actual code cannot be added as plain text here.
Mega Menu | Menu Themes | General Settings
| Description | Settings | Explanation |
|---|---|---|
| Default | Not aware of other options | |
| Arrow |
|
Icons for menu items with subnav for both mobile and desktop. SET ALL FOUR |
| Line Height | 1.2 | Change as needed |
| Z index | 999 | Leave as is |
| Shadow | Default = Not enabled | If enabled, this will put a shadow on the dropdown menu |
| Keyboard Highlight Outline | Color | Width | Offset | ADA | This sets the color of the outline when tabbing through the navigation |
| Hover Transitions | Default = Not enabled | |
| Reset Widget Styling | Default = Not enabled |
Mega Menu | Menu Themes | Menu Bar
DESTKTOP | Menu Bar
| Description | Settings | Explanation |
|---|---|---|
| Menu Height | 100% | See full description in the mega menu. Use in addition to “Menu Padding” below. |
| Menu Background | color | SET both to the same color. Two colors create a gradient. |
| Menu Padding | top | right | bottom |left | Set as needed. Affects menu bar height. |
| Menu Border Radius | top | right | bottom |left | No observable change during testing |
DESKTOP | Top Level Menu Items
| Description | Settings | Explanation |
|---|---|---|
| Menu Items Align | left | center | right | Justifies the main menu |
| Item Font | Multiple styles | ADA | Font Size needs to be at least 16px |
| Item Font (Hover) | color | weight | decoration | Only basic hover effects. Custom CSS will be needed for further effects |
| Item Background | Color | Sets background on non-active top-level menu items. TYPICALLY leave transparent. Use CSS instead |
| Item Background (hover) | Color | Sets background for hover AND active on top-level menu item. TYPICALLY leave transparent. Use CSS instead |
| Item Spacing | 0px + | Used to add gap/margin between top level menu items if the padding below is not enough. |
| Item Padding | top | right | bottom | left | Padding around top level menu item and the dropdown arrow. |
| Item Border | color | top | right | bottom |left | Border around top level items in a non-hovered state. TYPICALLY not used. |
| Item Border Radius | top | right | bottom | left | Works with Item Border above. TYPYICALLY not used. |
| Item Divider | Default = not enabled | Adds a vertical divider between top-level menu items. May need to adjust “Menu Padding” and “Menu Height” above to adjust height of dividers. |
| Hightlight Current Item | Default = not enabled | No observable change during testing |
Mega Menu | Menu Themes | Mega Menu
Still need to test all of these.
Mega Menus
| Description | Settings | Explanation |
|---|---|---|
| Panel Background | Color | |
| Panel Width | outer width | inner Width | |
| Panel Padding | top | right | bottom | left | |
| Panel Border | color | top | right | bottom | left | |
| Panel Border Radius | top | right | bottom | left | |
| Column Padding | top | right | bottom | left |
Widgets
| Description | Settings | Explanation |
|---|---|---|
| Title Font | Multiple styles | ADA – font size needs to be at least 16px |
| Title Padding | top | right | bottom | left | |
| Title Margin | top | right | bottom | left | |
| Title Border | Multiple styles | |
| Content Font | color | size | family | ADA – font size needs to be at least 16px |
Second Level Menu Items
| Description | Settings | Explanation |
|---|---|---|
| Item Font | Multiple styles | ADA – font size needs to be at least 16px |
| Item font (Hover) | color | weight | decoration | |
| Item Background (Hover) | color | |
| Item Padding | top | right | bottom | left | |
| Item margin | top | right | bottom | left | |
| Item Border | color | top | right | bottom | left |
Third Level Menu Items
| Description | Settings | Explanation |
|---|---|---|
| Item Font | Multiple styles | ADA – font size needs to be at least 16px |
| Item font (Hover) | color | weight | decoration | |
| Item Background (Hover) | color | |
| Item Padding | top | right | bottom | left | |
| Item margin | top | right | bottom | left | |
| Item Border | color | top | right | bottom | left |
Mega Menu | Menu Themes | Flyout Menus
Flyout Menu | Desktop dropdown
| Description | Settings | Explanation |
|---|---|---|
| Sub Menu Background | Color | ENTIRE background of desktop dropdown. |
| Sub Menu Width | 250px | Adjust as needed. |
| Sub Menu Padding | top | right | bottom | left | Padding for the submenu UL |
| Sub Menu Border | color | top | right | bottom | left | Border around the desktop dropdown. |
| Sub Menu Border Radius | top | right | bottom | left | Border radius around the destop dropdown. |
| Menu Item Background | Color | Background color just around links in the subnav. TYPICALLY left transparent. |
| Menu Item Background (hover) | Color | Background color just around links in the subnav on hover. OPTIONAL ADA may need more than just color change on hover. |
| Menu Item Height | 1.5rem | Adjust as needed |
| Menu Item Padding | top | right | bottom | left | Padding around links. Adjust as needed. |
| Menu Item Font | Multiple Styles | Font of desktop dropdown. ADA | Font needs to be at least 16px. |
| Menu Item Font (Hover) | color | weight | Decoration | Only basic hover effects. Custom CSS will be needed for further effects |
| Menu Item Divider | Default = not enabled | Add a thin horizontal divider between submenu items. Width is affected by “Sub Menu Padding” |
Mega Menu | Menu Themes | Mobile Menu
Mobile Menu
| Description | Settings | Explanation |
|---|---|---|
| Responsive Breakpoint | 768px | Breakpoint for when the mobile menu switches. |
Mobile Toggle Bar
| Description | Settings | Explanation |
|---|---|---|
| Toggle Bar Designer | Multiple Options | Hamburger Menu options |
| toggle Bar Background | Color | Mobile nav bar background |
| Toggle Bar Height | 40px | Adjust as needed. |
| Toggle Bar Border Radius | top | right | bottom | left | No observable change during testing |
| Disable Mobile Toggle Bar | blank | Leave blank |
Mobile Sub Menu
| Description | Settings | Explanation |
|---|---|---|
| Overlay Content | Default = unchecked | If unchecked, the menu pushes page content down. If checked, the overlay will cover page content. |
| Force Full Width | Default = not enabled | Optional |
| Off Canvas Width | 300px | |
| Menu Item Height | 40px | Height of each top level item in the mobile menu. Adjust as needed. |
| Menu Padding | top | right | bottom | left | Padding around mobile dropdown UL |
| Menu Background | Color | Entire background for Mobile Dropdown. |
| Menu Item Background (Active) | Color | TYPICALLY left transparent. |
| Font | color | size | Align | Adjust as needed. |
| Font | Color | Adjust as needed. |
Mega Menus
| Description | Settings | Explanation |
|---|---|---|
| Mega Menu Columns | 1 Column | Leave as is. |
Mega Menu | Menu Themes | Custom Styling
Optionally add custom css here.
Adding Classes to the Menu Module
In order to allow the menu module to nest at mobile and tablet views a class needs to be added to any menu category that is either top level, secondary level, tertiary level, or the mobile quick links.
- First navigate to Appearance > Menu.
- Open up each menu item that falls into one of the above catetories and add the appropriate class name to “CSS Classes”
- first-level (given to all top level menu items with children)
- second-level (given to all secondary or tertiary menu items)
- hide-desktop (given to the mobile quick link items so that they may be styled to not show at desktop)
- Click the “Save Menu” button
Adding the Nested Mobile Menu Script
A script will need to be added in the Divi Theme Options to activate the nesting feature.
- Divi Theme Options > Integration > Add code to the <head> of your blog
- Add the following script below (the first script is for Font Awesome, the second is the collapse script)
- Click the “Save Changes” button
<script src='https://kit.fontawesome.com/e55c7d6ecb.js' crossorigin='anonymous'></script>
<script>(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .first-level > a');
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
var SecondLevel = $('.et_mobile_menu .second-level-sub > a');
SecondLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
</script>
CSS For Nested Mobile Menu
- Add a code module in the same row as your menu in the Divi Theme Builder
- Paste the following css in that code module
/***** MOBILE NAVIGATION *****/
.et_mobile_menu .first-level > a, .et_mobile_menu .second-level-sub > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after, .et_mobile_menu .second-level-sub > a:after {
font-family: ‘ETmodules’;
content: ‘\4c’;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after, .et_mobile_menu .second-level-sub > .icon-switch:after {
content: ‘4d’;
}
.second-level, .second-level-sub {
display: none;
}
.reveal-items {
display: block;
}