Setting the Image Size

When you upload an image to WordPress, multiple sizes of that image are automatically generated. Bellows allows you to select which size image to use in the accordion menu.

Visit Appearance > Menus and click the tab of the Configuration you want to use. Then go to the Images panel to change the Image Size setting

Select the smallest size that will fill the space in your menu to maximize efficiency.

Setting an Image

To set an image for a menu item, go to the Appearance > Menus screen, hover item the item you’d like to add an image to, and click the Bellows button to open the menu item settings panel.

Then click on the Image Tab

To select your image, click the Select button beside Image

The Media Library window will appear. You can upload a new image, or select an existing image. Click Select to set the image.

The image will be displayed in the settings panel.

Note: make sure the Inherit Featured Image setting is set to “Disabled” in order to use your selected image (this is the default)

Click Save Menu Item to save your changes.

The image will appear within your menu

Inheriting a featured image

You can choose to automatically inherit the featured image assigned to any post to apply to the menu item.

Assign Featured Image on Save

This option will take whatever Featured Image is currently assigned to the associated post, and set it as the Image setting for this item. If you change the Featured Image for the post in the future, the menu item’s image will remain the same.

This is more efficient than Dynamically Inheriting the image, as the post’s featured image won’t need to be looked up each time the menu is generated.

Dynamically Inherit

This option will always pull the current featured image from the associated post and display it for this menu item. If the post’s featured image is updated, the image in the menu will also update.

Image Position

You can choose whether the image is displayed before or after the text of the menu item.

Pad Image

By default, the image expands to the full width of the menu container. If you’d like to align its edges to the text and space it away from the edges of the item, check the Pad Image option