{"id":6460,"date":"2015-10-14T13:03:53","date_gmt":"2015-10-14T12:03:53","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/pro-features\/search-box-2\/"},"modified":"2019-11-15T14:55:43","modified_gmt":"2019-11-15T14:55:43","slug":"menu-logo","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/menu-logo\/","title":{"rendered":"Menu Logo"},"content":{"rendered":"

Max Mega Menu Pro includes functionality that lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We’ll use this functionality to add a site logo directly to our menu bar.<\/p>\n

For an example of this functionality take a look at the header menu at the top of this page.<\/p>\n

How to add a menu logo<\/h3>\n

Create a new menu item for your logo<\/h4>\n

To add a Logo to your menu, first add a ‘Custom Link’ item to your menu:<\/p>\n

\"custom-logo-1\"<\/a><\/p>\n

Save the menu structure after adding your new custom link item.<\/p>\n

Open the mega menu settings<\/h4>\n

Position the menu item where you’d like the logo\u00a0to appear, then\u00a0hover over the new menu item and click the blue “Mega Menu” button to open the menu item settings:<\/p>\n

\"custom-logo-2\"<\/a><\/p>\n

Replace the menu item with a logo<\/h4>\n

Next, click the Replacements tab and select “Logo” as the replacement type. This will replace your ‘Logo’ Custom Link with a menu logo.<\/p>\n

\"\"<\/a><\/p>\n

Use the built in settings to choose a logo from your media library and set the width and height for the logo and save.<\/p>\n

Logo on the left, menu items on the right<\/h3>\n

In most cases it makes sense to have a full width menu, where your logo sits on the left hand side and the menu items on the right (see the menu at the top of this page for example).<\/p>\n

To do this go to Mega Menu > Menu Themes > Menu Bar<\/em> and set “Menu Items<\/strong> Align” to “Right”. This will align all of your menu items to the right hand side of the menu bar.<\/p>\n

Then go back to Appearance > Menus<\/em> and open the Mega Menu settings for your logo menu item and set “Menu Item Align” to “Left” to align just the logo item to the left.<\/p>\n

Menu Logo On Mobile<\/h3>\n

By default the logo will be rendered as a normal menu item (alongside your other menu items) within the mobile menu.<\/p>\n

If you would prefer the logo to be positioned within the mobile toggle bar (so that it is always visible on mobile), first hide the logo item on mobile:<\/p>\n

\"\"<\/a><\/p>\n

Then add a Logo block<\/a> to your mobile toggle bar.<\/p>\n

Retina Logos<\/h3>\n

Max Mega Menu will automatically output a retina logo if the source image size is at least double the configured display size.<\/p>\n

For example, if your logo is configured to display at 115 x 35px, the original\/source image needs to be at least 230 x 70px in size.<\/p>\n

Removing the active styling \/ background hover effect<\/h3>\n

The logo will be rendered as a normal menu item, so it will have the same background hover effect as your other menu items. You can remove the hover effect from just the logo item using Custom Styling<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Max Mega Menu Pro includes functionality that lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We’ll use this functionality to add a site logo directly to our menu bar. For an example of this functionality take a look…<\/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-6460","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 lets you replace an existing menu item with something else: either a logo, a search box, a shortcode or HTML. We’ll use this functionality to add a site logo directly to our menu bar. For an example of this functionality take a look...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/6460","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=6460"}],"version-history":[{"count":18,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/6460\/revisions"}],"predecessor-version":[{"id":220806,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/6460\/revisions\/220806"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=6460"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=6460"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=6460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}