{"id":2495,"date":"2023-03-21T11:31:17","date_gmt":"2023-03-21T15:31:17","guid":{"rendered":"https:\/\/umaine.edu\/userguide\/?p=2495"},"modified":"2023-08-11T11:36:14","modified_gmt":"2023-08-11T15:36:14","slug":"menu-content-block-and-mobile-device-display","status":"publish","type":"post","link":"https:\/\/umaine.edu\/userguide\/2023\/03\/21\/menu-content-block-and-mobile-device-display\/","title":{"rendered":"Menu content block and mobile device display"},"content":{"rendered":"

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.<\/p>\n

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:<\/p>\n

\"A<\/p>\n

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.<\/p>\n

\"A<\/p>\n

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.<\/p>\n

Workarounds to this known issue<\/strong><\/h3>\n

Option 1: Shorter button names<\/strong><\/h4>\n

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.<\/p>\n

Option 2: Button shortcode<\/strong><\/h4>\n

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.<\/p>\n

\"An<\/p>\n

The button shortcode is documented in our user guide.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"6","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":"","spc_primary_category":0},"categories":[6,17,16],"tags":[],"class_list":["post-2495","post","type-post","status-publish","format-standard","hentry","category-advice","category-content-blocks","category-menus"],"taxonomy_info":{"category":[{"value":6,"label":"Advice"},{"value":17,"label":"Content Blocks"},{"value":16,"label":"Menus"}]},"featured_image_src_large":false,"author_info":{"display_name":"kirby","author_link":"https:\/\/umaine.edu\/userguide\/author\/kirby\/"},"comment_info":"","category_info":[{"term_id":6,"name":"Advice","slug":"advice","term_group":0,"term_taxonomy_id":6,"taxonomy":"category","description":"","parent":0,"count":69,"filter":"raw","cat_ID":6,"category_count":69,"category_description":"","cat_name":"Advice","category_nicename":"advice","category_parent":0},{"term_id":17,"name":"Content Blocks","slug":"content-blocks","term_group":0,"term_taxonomy_id":17,"taxonomy":"category","description":"","parent":0,"count":24,"filter":"raw","cat_ID":17,"category_count":24,"category_description":"","cat_name":"Content Blocks","category_nicename":"content-blocks","category_parent":0},{"term_id":16,"name":"Menus","slug":"menus","term_group":0,"term_taxonomy_id":16,"taxonomy":"category","description":"","parent":0,"count":3,"filter":"raw","cat_ID":16,"category_count":3,"category_description":"","cat_name":"Menus","category_nicename":"menus","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/2495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/comments?post=2495"}],"version-history":[{"count":1,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/2495\/revisions"}],"predecessor-version":[{"id":2499,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/posts\/2495\/revisions\/2499"}],"wp:attachment":[{"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/media?parent=2495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/categories?post=2495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umaine.edu\/userguide\/wp-json\/wp\/v2\/tags?post=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}