Menu
The Menu module can give you more options for menu content, style, and layout than the menu available in your theme or widget area.
Last updated
Was this helpful?
The Menu module can give you more options for menu content, style, and layout than the menu available in your theme or widget area.
Last updated
Was this helpful?
The Menu module also gives you the ability to insert a menu anywhere in your layout.
The Menu module displays items from a WordPress menu that you designate. It has several choices of layout. Menu alignment, colors, and typography are set on the Style tab.
Use special menus in your Accept Builder page layouts. For example, if you have one group of static pages on your site related to a particular topic, you could create a special menu for the pages in that particular group and display the links in a Menu module on the main page in that group.
Save a Menu module and use it in a 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.
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.
In the Menu field, choose the WordPress menu that you have defined in Appearance > Menus from the WordPress admin panel. This menu defines which items are displayed in the menu.
If the website has no menu, this field says No menu found with a link to add one, which opens Appearance > Menus in a new tab. When you're finished, close the additional tab and reload your layout page in the previous tab to display the new menu choice.
The Layout setting has four layout options, described in detail in the following sections.
On large screens, Horizontal layouts tend to work better in wide short columns, while Vertical, Accordion, and Expanded layouts tend to work better in narrow tall columns.
Why? The horizontal layout's menu boundary is fit to the menu items. In the following screenshot, you can see a horizontal menu with a color background, inside its column.
The following screenshot shows a vertical layout with a color background in the same column. The menu's boundary is sized to fill the column width and the submenu and search icons are right-justified. You can adjust the width of the module by changing the column width or adding margins or padding to the containing row or column, or increase the margin of the Menu module itself.
The Accordion and Expanded layouts look the same as the vertical layout. Their differences lie in how their submenus behave.
This option is a standard horizontal layout that supports dropdown submenus, with a Submenu layout choice of a down arrow, plus sign, or nothing. This screenshot shows a horizontal menu with a down arrow for the item with a submenu.
You can also add an image to a horizontal layout that appears centered between the menu items by using the Centered + inline logo settings.
As described above, the vertical menu fills the width of the column, with the submenu icon and search icon right-justified.
The submenu expands to the right and overlays the next column, as shown here:
TIP
Vary the submenu color opacity at Style > Dropdowns > Dropdown background color to control whether content displayed underneath the submenu bleeds through or not.
If the vertical menu is in the rightmost column, the submenu displays to the right if there is room between the right edge of the menu and the edge of the browser screen, as shown in this screenshot.
If there's no room to expand to the right, it expands to the left. For narrower menus, this means the submenu can cover items in the main menu while it's displayed:
The behavior changes when the menu is displayed as an icon. See the section on responsive behavior.
The Accordion layout is a vertical layout that expands the menu to display submenu items inline when the toggle icon is clicked. Here's a screenshot showing two submenu items after the down arrow on the Home menu link was clicked.
TIP
You can see from the screenshot that the submenu is left-aligned with the main menu items, so it's a good idea to change the submenu background color at Style > Dropdown.
TIP
You can distinguish submenu items from main menu items with different background colors. The hover color shown in the screenshot comes from the Style > Dropdowns > Link hover background color. The Style > Dropdowns > Dropdown background color is ignored.
The Submenu icon option is available for Horizontal, Vertical, and Accordion layouts. The choices are as follows:
Horizontal and vertical layouts: down Arrows, Plus sign, None
Accordion layout: Arrows or Plus sign
The value you set for Menu name appears in two places:
The responsive Menu button, if you have chosen that in the Responsive Toggle section.
The ARIA label in the HTML output, to help accessibility tools identify the menu. For example, if you change the default value Menu to primary menu, the HTML included with the Menu module appears like this:
When Layout is set to Horizontal, there's a Centered + inline logo section with an option to add a logo that appears in the center of the menu items.
TIP
Horizontal menu items wrap onto a second line as screen size decreases, so be sure to test responsive behavior. The alignment of the wrapped line follows the alignment setting in the Style > Menu section.
In the Search section of the General tab, you can show or hide a search icon to the menu.
You can replace the default icon with an icon from the available icon sets.
In the Search menu section of the Style tab, you can style both the search icon and the search form that appears when you click the icon.
The Responsive section on the General tab controls how the menu layout changes as screen width becomes smaller, with the following settings.
Hamburger icon The hamburger icon is three horizontal lines. If you want a background color, as shown in this screenshot, set it at Style > Dropdowns > Dropdown background color.
Hamburger icon + label This setting includes both the Hamburger icon and a MENU label, with an optional background (set on the Style tab).
Menu button This setting is a button with a label. By default, the menu button label is Menu unless you have a custom setting for Menu name.
None With this setting, the menu items continue to be displayed on smaller devices rather than changing to a Hamburger icon or Menu button. For a menu whose Layout setting is Horizontal, another setting appears immediately underneath the None setting, called Stacked layout. As shown in the following screenshot, if this setting No, the menu remains horizontal and wraps on small devices. If Yes, then on smaller devices the menu items are displayed in an Accordion (vertical) list. In all other menu layouts, the None setting displays an Accordion layout.
With the None setting, you won't see the settings for Responsive style and Responsive breakpoint described in the following two sections.
This setting has the following options for menu expansion when the responsive icon or button is clicked.
Inline The expanded menu falls below the hamburger. This works for centered menus but doesn’t work if, for example, you have a hamburger in a small column on the right. The menu gets squished.
Below row This option 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 See the Overlay article for an example.
Flyout overlay See the Flyout article for an example.
Flyout push See the Flyout article for an example.
Flyout push with opacity See the Flyout article for an example.
By default, the responsive menu appears on small devices only, but you can change the behavior to medium and small devices, or all devices.
The Style tab has the following options.
This section has two settings:
Menu alignment Left, center, or right alignment of main menu items.
Menu background color
Link color Set the color of the menu items when they're not active.
Link hover color Set the color of the menu items that are either active (displaying that page), on hover with a mouse, or immediately after being tapped.
Link hover background color You can optionally set a background color for the menu items that are either active (displaying that page), on hover with a mouse, or immediately after being tapped.
Link padding The number of pixels or ems of padding between menu item text and the menu item boundary.
Link typography See the article about typography settings Typography section to style your menu text.
Set Show separators to Yes to display horizontal lines between menu items.
If General > Search menu is set to Show, there's a Search menu section on the Style tab where you can style not only the search icon but also the search form, which appears when you click the search icon. This section has the following settings.
Icon size
Icon color
Icon hover color
Form width
Form background color
Form background hover color
Form border See the article about border settings.
Form border hover
Form padding
With the Menu Cart option set to Show on the WooCommerce tab, the Style tab has a WooCommerce menu cart section with the following settings.
Background color
Hover background color
Color This setting changes the color of both the icon and any other options you have set to display.
Hover color
Typography See the article about typography settings Typography section.
You can add a menu item whose link goes to a specific section on the same page or a section on a different page. This works both with menus you set up in your theme and menus in the Accept Builder Menu module. It's particularly useful for single-page websites where you have a menu for the various sections on that page.
This technique involves two steps: adding a unique ID (called an anchor) to the target section in an Accept Builder layout, then adding the link with that anchor to your menu.
In the Accept Builder editor, open the row (or column or module) that you plan to link to.
Click the Advanced tab and scroll down to the HTML elements section.
For the ID setting, add a unique value such as my-unique-id.
ID values may only contain alphanumeric characters, hyphens, or underscores.
TIP
It's a best practice to prefix ID and class values with a namespace. The namespace prefix plays a double role.
First, it helps identify where the ID or class comes from. For example, Accept Builder uses the namespace fl-.
For example, if your business name is Best Website Designs, you might choose bwd- as your namespace prefix and your ID value might be bwd-menutarget-1. Just make sure each ID value is unique on your site.
On the WordPress admin menu, click Appearance > Menus and make sure the menu you want to use is displayed.
In the left column expand the Custom links category.
Enter the full URL of the target page in which the section occurs, followed by the pound sign and your ID. For example, if the section occurs on the page https://www.example.com/goals/ , then your URL would be: https://www.example.com/goals/#my-unique-id
Enter whatever link text you want your menu item to display.
Click Add to menu.
There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.
The Expanded layout is similar to the . The following screenshot shows an example. Top-level menu and submenu items are displayed in a list and both top-level and submenu items are left-aligned.
Second, a namespace helps to avoid accidentally using words that are reserved for use in coding languages like and or duplicating IDs and classes from other products.
