Menu Logo

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 create an inline, expanding search box for our menu.

To add a Logo to your menu, first add a ‘Custom Link’ item to your menu:

custom-logo-1

Open the mega menu settings

Position the menu item where you’d like the logo to appear, then open the Mega Menu settings for the item:

custom-logo-2

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

Menu Logo

Use the built in settings to choose a logo from your media library and set the width and height for the logo and save.

Retina Logos

To add a retina logo to your menu, you will need to double the Width and Height settings of the logo. E.g. if you want to display your logo at 100px tall, enter 200px as the logo height.

Then go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:

Removing the background hover effect

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.

Like what you see? This functionality is available in Max Mega Menu Pro

Related Articles