{"id":8084,"date":"2021-03-15T10:51:44","date_gmt":"2021-03-15T09:51:44","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?post_type=faq&#038;p=8084"},"modified":"2021-03-15T12:04:15","modified_gmt":"2021-03-15T11:04:15","slug":"image-wordpress-menu","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/image-wordpress-menu\/","title":{"rendered":"How to add an Image in a WordPress Menu"},"content":{"rendered":"<div class=\"row\"  id=\"row-791446515\">\n\n\t<div id=\"col-1626050321\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>Our themes natively support images in your WordPress menu. Images in menus can be used for promoting landingpages, special promotions or new products for example. This because images always get more attraction then simple menu items.\u00a0<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1175829748\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"241\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-1024x242.png\" class=\"attachment-large size-large\" alt=\"example image in WordPress mega menu\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-1024x242.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-247x58.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-510x121.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-300x71.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-768x181.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-1536x363.png 1536w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/example-image-in-WordPress-mega-menu-2048x484.png 2048w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1175829748 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>To add an image in one of your WordPress Menus simply follow these steps:\u00a0<\/p>\n<ol>\n<li>Go to Admin &gt; Appearance &gt; Menus<\/li>\n<li>Open one of your menu items or create a new &#8220;Custom Link&#8221; menu item<\/li>\n<li>Now place an image HTML tag into the Navigation label input text e.g. <br \/>&lt;img src=&#8221;https:\/\/demos.welaunch.io\/strand\/wp-content\/uploads\/sites\/47\/2021\/02\/test5_0001_hike-in-utah-7A8599N-300&#215;200.webp&#8221;&gt;<\/li>\n<\/ol>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1044905674\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"994\" height=\"1024\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-994x1024.png\" class=\"attachment-large size-large\" alt=\"how to add an image to a menu in wp backend\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-994x1024.png 994w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-247x254.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-510x525.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-291x300.png 291w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend-768x791.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/how-to-add-an-image-to-a-menu-in-wp-backend.png 1066w\" sizes=\"auto, (max-width: 994px) 100vw, 994px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1044905674 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-1723564818\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1723564818 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-8084","faq","type-faq","status-publish","hentry","faq_topics-strand-faqs","faq_topics-strand"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=8084"}],"version-history":[{"count":3,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8084\/revisions"}],"predecessor-version":[{"id":8096,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/8084\/revisions\/8096"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=8084"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/product_cat?post=8084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}