The Menu module can give you more options for menu content, style, and layout than the menu available in your theme or widget area. It also gives you the ability to insert a menu anywhere in your layout. Here are some ideas:

• Suppress the theme’s header and footer and use Page Builder to construct your own header and footer by creating row layouts that could include a Menu module. Save the header and footer as rows and use them on any page in your site. Global rows keep the content synched across pages, standard rows insert the content but let you change it for each page. See the Related Articles for more information about saving rows.
• Use your theme’s standard header with menu, then create a footer row with a Menu module that uses a different menu.
• Save a Menu module and use it in shortcode in a text widget. There’s a Custom Menu widget in WordPress, but the menu module gives you more control over styling without resorting to CSS. See the Related Articles for how to use shortcode in widgets.
• If you have FAQs that contain fairly long answers, create a separate Post for each individual FAQ, then create a menu item for each Post, then use that menu in a Menu module embedded in your page content. That menu serves as a table of contents linking to the Post that contains the answer. The following screenshot shows an example of a menu used as an FAQ table of contents.

Choose menu layouts

The Menu module has the following four different menu layout options. For the first three options, you have a choice of an arrow or plus sign to display the submenu.

• Horizontal
  A standard horizontal layout that supports dropdown submenus, with a choice of down arrow, plus sign, or nothing. These two screenshots show horizozntal menus with an arrow for the submenu. The submenu is opaque in the upper screenshot and semi-transparent in the lower menu.
• Vertical
  A vertical layout that has support for submenus that fly out to either the left or right of the menu. For example, here’s the flyout on mouseover of the main menu item:
• Accordion
  A vertical accordion layout that displays submenus inline when the toggle icon is clicked. For example:Note that with accordion layout, submenu opacity background is 100%, no matter how it’s set on the Style tab. In the following screenshot, the submenu background opacity is set at 60% but appears at 100%.
• Expanded

  Epanded layout is similar to the Navigation Menu widget. Top-level menu and submenu items are displayed in an unordered list style format. For example:

Set responsive behavior

You can choose how to display the menu on mobile devices: the expanded form, a hamburger icon, a MENU label, or both the hamburger icon and MENU label. There’s also a setting to set the breakpoint at which the changeover to the hamburger icon or MENU label appears: By default, it appears on small devices only, but you can change the behavior to medium and small devices, or all devices.

There’s a Responsive style section with the following three options for how expand the menu when the hamburger icon is clicked:

• Inline
• Below row
• Overlay

Below row removes the menu in the markup and puts it below the column that the menu is in. This means that expanded menus in small columns still appear inline but don’t get squished.

Overlay will overlay the expanded menu on top of the content below.

Style everything

Use the Style tab of the Menu module to create unique menu designs with style options:

• Left, center, or right alignment of main menu items
• Show or hide a drop shadow on the submenu box
• Text link and hover color
• Font size, format (uppercase, lowercase, caps), and weight (normal, bold, light)
• Horizontal and vertical spacing between links
• Menu background color and opacity
• Submenu background color and opacity
• Background hover color
• Show or hide separators between menu items, set separator color and opacity

Notes: If you are using the Beaver Builder Theme,  the font-family is what you defined for page content in  Customize > General > Text and cannot be customized on the Style tab. By default, the menu link colors appear in the color you defined in Appearance > Customize > General > Accent Color, and you can customize this color.

Style options for mobile devices

The Mobile Style option on the General tab has the following settings:

• Expanded
  The menu will not collapse and all of the menu items will show in an unordered list style format.
• Hamburger Icon
  The menu collapses as the screen becomes smaller, and a hamburger icon (horizontal lines) toggle button appears.
• Hamburger Icon + Label
  The menu collapses as the screen becomes smaller, and a hamburger icon toggle button plus the word MENU appears.
• Menu Button
  This option displays a button labeled MENU, similar to how the Beaver Builder theme works.