This feature is experimental. Its implementation may change in the future An Image Portal allows you to display an item’s image, on hover, in a separate area of the menu. The Portal is the area which displays the images separately from the source items. Note that in the Portal setup, the images will not be clickable, as they will disappear when hovering off of the associated menu items. Setup Instructions Overview We’ll set up a group of menu items with images assigned. Then we’ll add a custom content item elsewhere in the layout, containing the [ubermenu_image_portal] shortcode, which will select those menu items and display their images when hovered. 1. Create a list of menu items First, create your list of items. These items will trigger an associated image to appear in the Portal when you hover over them. You can put them in whatever layout you like (multiple columns, rows, etc), however, none of the items should have dropdown submenus, as the dropdown trigger mouse interaction would conflict with the image hover mouse interaction. 2. Apply an image to each item You can set an Image for each item, either manually or by inheriting the featured image from that post. Make sure you set the Item Layout for the items to “Image Above”, either on the item itself or in the Control Panel (global settings). These images will be collected and removed from the source menu items and displayed in the Portal instead. (For now, you’ll see them with the items, but that’ll change once we add the shortcode in step 4). 3. Give your item source container a selector When we create the actual Portal, we’ll give it a standard CSS/JS selector to indicate which items’ images should be displayed in the portal. You can set this up […]

Filters added as of UberMenu version 3.2.1 These filters allow you to alter the image that is displayed with your menu items, beyond the controls in the menu item settings. ubermenu_item_image_id The ubermenu_item_image_id filter allows you to filter the image ID for a menu item. The ID must be a valid WordPress image attachment ID in your database. If your target image is an attachment in the database, use this filter. ubermenu_item_image_id Your registered callback will be called once for each menu item. Return the ID of the image attachment resource you want to display. $img_id The ID of the image. If an image has been set for this item in the menu item settings, it will be passed to the function via this parameter. $ubermenu_item An UberMenu Item object. Example: Replace a specific menu item’s image with a specific image Tips To get the ID of the menu item, use To get a specific setting, use To get the object that the WordPress Menu Item points to, use ubermenu_item_image_src The ubermenu_item_image_src filter allows you to filter the image src for a menu item. If your image URL is an external resource, or not a WordPress image attachment, use this filter. ubermenu_item_image_src Your registered callback will be called once for each menu item. The returned array must follow the structure of the wp_get_attachment_image_src return array. $img_src The URL/src attribute for the image. $ubermenu_item An UberMenu Item object. Example: Display the author’s gravatar for posts ubermenu_item_image The ubermenu_item_image filter gives you complete control over the HTML output for the image. If you want complete control, use this filter; but be aware that the UberMenu image settings won’t apply here, so you may need to custom style your image. ubermenu_item_image Your registered callback will be called once for each menu item. Return […]

The Directory theme by AIT causes significant residual styling which interferes with the menu, and therefore requires Manual Integration Integration The code that needs to be replaced is in the directory/Templates/snippets/branding-header.php file. The residual styling is rooted in the #access ID, so we’ll replace that with the manual integration code conditionally: Note: you’ll want to make this change in a child theme in order to preserve the changes for next time you update the theme Now UberMenu can function without interference from the theme. Custom CSS for Positioning Now that UberMenu can function unimpeded, we’ll add some Custom CSS in the Desktop CSS Tweaks in order to position the menu the same way the original menu was positioned (aligned with the edge of the slider) If you are using a style with thick borders on the bottom of the header, we’ll also add this modification to the header, which prevents other elements from overlapping the border image and the background image from repeating: Recommended Settings These settings are not required, but they are recommended if you want to make your menu display similarly to the original theme menu. Control Panel Menu Bar Alignment – Right Bound Submenu To – Unbounded Customizer Skin – Vanilla Top Level Text Transform – Uppercase Top Level Font Size – 15px Top Level Font Color – #444 Top Level Font Color [Current] – #E20202 Top Level Font Color [Activated] – #E20202

In short, image optimization means you should be using the smallest image file possible to fill the desired space in your menu. In other words, if your image displays at 100×100px, make sure its actual dimensions are 100×100px and not 300×300px Choosing an appropriate Image Size Note that for the best performance, just upload images at the exact size that they should be used in the menu. But if you are using existing images that need to be resized: You can select your Image Size – this is the size of the actual image file – in the Control Panel or on individual items. You can choose from any registered image size. These include the standard image sizes registered by WordPress, image sizes registered by your theme, and image sizes registered by other plugins. If you want, you can create a specific image size for your menu. You can do this either through a line of PHP or through a plugin. PHP Plugin Simple Image Sizes Remember that just adding a new image size won’t affect your existing images, only new images that you upload. To resize existing images, use a plugin like Regenerate Thumbnails For more information, see Images Image Lazy Loading You can also lazy load your images. This means that the images in a submenu won’t be loaded until that submenu is opened. You can find this setting in the Control Panel > Main UberMenu Configuration > Images > Lazy Load Images. This will save you from loading all the images at page load. Image Compression Consider using an image compression tool like WP Smush.it to compress your images to their smallest possible weight (in KB). Sending fewer bytes over the wire will decrease site load times.

Menu Item Settings > Submenu > Background Image You can assign an image to a submenu background via the Menu Item Settings. 1. Open the Menu Item Settings > Submenu tab Hover over the item whose submenu you would like to apply the image to and click the Uber button that appears, then click the Submenu tab in the left column 2. Select your image Scroll down to the Submenu Background Image setting and click the blue Select button Upload a new image or select your image from the Media Library. Click the blue Select button to set your image. The image will appear in the settings panel 3. Set Background Repeat Decide if you want to make the background repeat as a pattern. Generally leave this set to No Repeat 4. Set Background Position This can be set to any valid background-position CSS value. The most common would be bottom right bottom left bottom center top right top left top center 5. Set Background Size Normally, you would leave this set to auto to display the image scaled to its proper proportions, but any valid background-size property can work. cover ensures the entire submenu is covered by the background image. 6. Submenu Padding If you want to leave extra space for the image in the submenu, you can use padding to do so. The value here works just like the value for the CSS padding property – you can declare 4 values, top right bottom left. 7. Save your settings Click the Save Menu Item button to save your settings. Hide on Mobile If you would like to hide the background images below the mobile breakpoint, you can do so in the Control Panel > Main UberMenu Configuration > Images > Submenu Background Images > Hide Background Images on […]

Menu Item Settings > Images Assigning an image To add an image to a menu item: 1. Open the Item Settings > Image panel In Appearance > Menus, click the menu item’s Uber button to open the Menu Item Settings panel and click the Image tab. 2. Click the Select button to open the WordPress Media Library 3. Upload your image If your file is not already on the server, click the Upload Files tab and upload your file. If your image already exists in the Library, proceed to step 4. 4. Select your image Click the image you want to use to select it (this will occur automatically after upload). Then click the blue Select button in the bottom right to apply your selection. After your image is selected, it will appear in the UberMenu Menu Item Settings panel 5. Save your settings Click the Save Menu Item button to make your changes appear on your site. Automatically importing the featured image from the related post For post (Post, Page, Custom Post Type) menu items, your post may already have a Featured Image. If you’d like to use this image in your menu, you can use the Inherit Featured Image setting. Assign Image on Save By choosing Assign Image on Save, when you save your menu item, UberMenu will look up the featured image for the associated post/page and assign it as the Image for this menu item. This way the image doesn’t need to be determined every page load. This is more efficient, but if you change your featured image on your post later, you’ll need to also re-save the menu item for it to appear in the menu. Dynamically Inherit By choosing Dynamically Inherit, the menu will look up the featured image and apply it when the […]