{"id":2293,"date":"2015-06-09T11:49:46","date_gmt":"2015-06-09T10:49:46","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=2293"},"modified":"2019-06-04T10:38:21","modified_gmt":"2019-06-04T09:38:21","slug":"search-box","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/search-box\/","title":{"rendered":"Search Box"},"content":{"rendered":"<p>Max Mega Menu Pro includes functionality that\u00a0lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We&#8217;ll use this functionality to create an inline, expanding search box for our menu.<\/p>\n<p>To create a Search Box for your menu, first add a &#8216;Custom Link&#8217; item to your menu:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2297\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link.png\" alt=\"add-custom-link\" width=\"1113\" height=\"709\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link.png 1113w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link-300x191.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link-1024x652.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link-125x80.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/add-custom-link-75x48.png 75w\" sizes=\"auto, (max-width: 1113px) 100vw, 1113px\" \/><\/a><\/p>\n<p>Position the menu item where you&#8217;d like the search box to appear and click &#8220;Save Menu&#8221;. Once the menu structure is saved, hover over the Search item and open the Mega Menu settings for the item:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2298\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings.png\" alt=\"open-custom-link-settings\" width=\"1113\" height=\"641\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings.png 1113w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings-300x173.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings-1024x590.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings-125x72.png 125w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/open-custom-link-settings-75x43.png 75w\" sizes=\"auto, (max-width: 1113px) 100vw, 1113px\" \/><\/a><\/p>\n<p>Next, click the Replacements tab and select &#8220;Search Box&#8221; as the replacement type. This will replace your &#8216;Search&#8217; Custom Link with a working Search Box.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-search.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-7641 size-full\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/03\/screenshot-search.png\" alt=\"\" width=\"1325\" height=\"790\" \/><\/a><\/p>\n<p>Use the built in settings to adjust the search box styling to match your menu theme.<\/p>\n<p>There are 3 behaviour\u00a0options for the search box:<\/p>\n<ul>\n<li>Expand to left<\/li>\n<li>Expand to right<\/li>\n<li>Static<\/li>\n<\/ul>\n<p>Once you are happy with the settings, click the &#8216;Save&#8217; button to apply your changes.<\/p>\n<h3>End Result<\/h3>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/inline-menu-search-box.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2299\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/06\/inline-menu-search-box.gif\" alt=\"inline-menu-search-box\" width=\"948\" height=\"60\" \/><\/a><\/p>\n<h3>How to change the search box placeholder text color<\/h3>\n<p>Go to <em>Appearance &gt; Customize &gt; Additional CSS<\/em> and add the following:<\/p>\n<pre class=\"lang:default decode:true\">\/* do not group these rules *\/\r\n.mega-menu .mega-search input::-webkit-input-placeholder {\r\n    color: white;\r\n}\r\n.mega-menu .mega-search input:-moz-placeholder {\r\n    color: white;\r\n}\r\n.mega-menu .mega-search input::-moz-placeholder {\r\n    color: white;\r\n}\r\n.mega-menu .mega-search input:-ms-input-placeholder {\r\n    color: white;\r\n}<\/pre>\n<h3>Modifying the search results<\/h3>\n<p>Max Mega Menu does not control which results are shown on your search results page.<\/p>\n<p>WordPress itself is responsible for searching your site content and returning relevant results. If you want to modify the search results (e.g. to include or exclude custom post types), you will need to modify the core WordPress search behaviour yourself (through either custom code or a plugin).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Max Mega Menu Pro includes functionality that\u00a0lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We&#8217;ll use this functionality to create an inline, expanding search box for our menu. To create a Search Box for your menu, first add&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[16],"ht-kb-tag":[],"class_list":["post-2293","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-pro-features"],"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":"Max Mega Menu Pro includes functionality that\u00a0lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We&#8217;ll use this functionality to create an inline, expanding search box for our menu. To create a Search Box for your menu, first add...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2293","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=2293"}],"version-history":[{"count":5,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2293\/revisions"}],"predecessor-version":[{"id":128794,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2293\/revisions\/128794"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=2293"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=2293"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=2293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}