Menu content block and mobile device display

The menu content block can be a handy page element to display a list of links in a button or list format, and is especially useful when that same set of links needs to be maintained across multiple pages.

There is a known display issue with the menu content block’s “Blue horizontal buttons” display option when viewed on a mobile device. While the menu’s blue buttons will become wide enough to accommodate a long button name, a button’s text may wrap to multiple lines when narrowed for a mobile device. Below are two examples of a menu using this feature to illustrate the issue:

A menu content block, displaying a long menu name with proper display on desktop view.

Above is an example of a menu block with button names of various widths. As you can see, the third button is much wider than the first two, accommodating the much longer button text.

A menu content block, displaying a button with very long text that does not wrap well on mobile view.

On a mobile device’s narrower screen, the third button’s text shifts to two lines, and the second line display is left-aligned, not centered.

Workarounds to this known issue

Option 1: Shorter button names

In the menu editor, you can override the page or custom link name with shorter text, which is typically a good idea for navigation menus in general. This option should be used if the menu is displayed on multiple pages.

Option 2: Button shortcode

The button shortcode does not have this same display issue, as shown in the image below. This option should be used if the menu is displayed on a single page, or if it is unlikely you will need to manage the buttons on multiple pages.

An example of a menu using the button shortcode.

The button shortcode is documented in our user guide.