{"id":101005,"date":"2017-01-12T15:24:18","date_gmt":"2017-01-12T15:24:18","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/shortcode-in-menu-copy\/"},"modified":"2019-05-13T15:40:02","modified_gmt":"2019-05-13T14:40:02","slug":"how-to-display-images-in-sub-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-to-display-images-in-sub-menu\/","title":{"rendered":"How to display images in a sub menu"},"content":{"rendered":"<h3>Add an image widget to your menu<\/h3>\n<p>Go to <em>Appearance &gt; Menus.<\/em> Find the menu item that you would like to display the image below, and click the blue &#8220;Mega Menu&#8221; button.<\/p>\n<p>In our example we want to display an image widget inside the &#8220;Images&#8221; sub menu.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-101015\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button.png\" alt=\"\" width=\"2426\" height=\"1652\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button.png 2426w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button-300x204.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button-768x523.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button-1024x697.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-blue-button-50x34.png 50w\" sizes=\"auto, (max-width: 2426px) 100vw, 2426px\" \/><\/a><\/p>\n<p>Make sure the &#8220;Sub menu display mode&#8221; is set to &#8220;Mega Menu&#8221;, then select &#8220;Image&#8221; from the widget selector:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-101011\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add.png\" alt=\"\" width=\"2426\" height=\"1652\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add.png 2426w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add-300x204.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add-768x523.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add-1024x697.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-add-50x34.png 50w\" sizes=\"auto, (max-width: 2426px) 100vw, 2426px\" \/><\/a><\/p>\n<p>A new image widget will be added to the sub menu. You can edit the widget settings by clicking on the spanner icon.<\/p>\n<h3>End Result<\/h3>\n<p>After adding and setting up three image widgets, the sub menu looks like this:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-101012\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result.png\" alt=\"\" width=\"2052\" height=\"870\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result.png 2052w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result-300x127.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result-768x326.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result-1024x434.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/01\/image-widget-result-50x21.png 50w\" sizes=\"auto, (max-width: 2052px) 100vw, 2052px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Add an image widget to your menu Go to Appearance &gt; Menus. Find the menu item that you would like to display the image below, and click the blue &#8220;Mega Menu&#8221; button. In our example we want to display an image widget inside the &#8220;Images&#8221; sub menu. Make sure the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-101005","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"Add an image widget to your menu Go to Appearance &gt; Menus. Find the menu item that you would like to display the image below, and click the blue &#8220;Mega Menu&#8221; button. In our example we want to display an image widget inside the &#8220;Images&#8221; sub menu. Make sure the...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/101005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=101005"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/101005\/revisions"}],"predecessor-version":[{"id":198603,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/101005\/revisions\/198603"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=101005"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=101005"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=101005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}