Submenu Background Image

Knowledgebase Docs » UberMenu 3
USEFUL? 11
UberMenu 3

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 Mobile