{"id":109097,"date":"2017-03-27T11:45:51","date_gmt":"2017-03-27T10:45:51","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&#038;p=109097"},"modified":"2017-05-05T09:03:34","modified_gmt":"2017-05-05T08:03:34","slug":"how-to-create-buttons-using-max-mega-menu-pro","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-to-create-buttons-using-max-mega-menu-pro\/","title":{"rendered":"How to create &#8220;Buttons&#8221; using Max Mega Menu Pro"},"content":{"rendered":"<h3>Menu Setup<\/h3>\n<p>In this example we will change the &#8220;My Button&#8221; menu item so that it is styled independently of the rest of the menu items, giving it a &#8220;button&#8221; appearance.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-109098\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1.png\" alt=\"\" width=\"1776\" height=\"112\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1.png 1776w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1-300x19.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1-768x48.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1-1024x65.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-1-50x3.png 50w\" sizes=\"auto, (max-width: 1776px) 100vw, 1776px\" \/><\/a><\/p>\n<p>The &#8220;My Button&#8221; menu item is a Custom Menu Item added to the menu structure in the usual way:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-109099 size-medium\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2-300x159.png\" alt=\"\" width=\"300\" height=\"159\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2-300x159.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2-768x407.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2-1024x542.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2-50x26.png 50w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-2.png 1046w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h3>Applying the &#8220;Button&#8221; Styling<\/h3>\n<p>Go to <em>Appearance &gt; Menus<\/em> and hover over the &#8220;My Button&#8221; menu item, then click the blue &#8220;Mega Menu&#8221; button.<\/p>\n<p>This will open up the mega menu settings for the My Button item. Go to the &#8220;Styling&#8221; tab:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-109100 size-large\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3-1024x555.png\" alt=\"\" width=\"1024\" height=\"555\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3-1024x555.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3-300x163.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3-768x416.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-3-50x27.png 50w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>In our example, we&#8217;ll apply the following Custom Styling options to the My Button menu item<\/p>\n<ul>\n<li>Background: Blue<\/li>\n<li>Font Size: 12px<\/li>\n<li>Menu Item Border Radius (left, top, right, bottom): 3px<\/li>\n<li>Menu Item Height: 24px<\/li>\n<\/ul>\n<p>Note: if your menu item is aligned to the right hand side of the menu, it will lose it&#8217;s central vertical alignment. To correct this, also apply a value to the &#8220;Menu Item Margin (Top)&#8221; to push the menu item down.<\/p>\n<h3>End Result<\/h3>\n<p>After applying the custom styling, the &#8220;My Button&#8221; menu item has a button like appearance:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-109101 size-large\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4-1024x66.png\" alt=\"\" width=\"1024\" height=\"66\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4-1024x66.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4-300x19.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4-768x49.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4-50x3.png 50w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/03\/button-4.png 1774w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Menu Setup In this example we will change the &#8220;My Button&#8221; menu item so that it is styled independently of the rest of the menu items, giving it a &#8220;button&#8221; appearance. The &#8220;My Button&#8221; menu item is a Custom Menu Item added to the menu structure in the usual way:&#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-109097","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":"Menu Setup In this example we will change the &#8220;My Button&#8221; menu item so that it is styled independently of the rest of the menu items, giving it a &#8220;button&#8221; appearance. The &#8220;My Button&#8221; menu item is a Custom Menu Item added to the menu structure in the usual way:...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/109097","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=109097"}],"version-history":[{"count":2,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/109097\/revisions"}],"predecessor-version":[{"id":109104,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/109097\/revisions\/109104"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=109097"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=109097"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=109097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}