Let the menu do the talking...

The menu of a website is the central hub that links everything together. It makes sense to have a menu that is visually enticing and that can also bring attention to any promotions or information that you may want to share with visitors. 

Featured image

You can create a menu that has a "featured" image as well as text that links to different top level menu nodes. This means you can have a different image for each top level section. This area could be used for featuring product information or promoting an offer on your site. You can also resize and crop the image as appropriate.

This is achieved by using the "Promo Menu" plugin. 

Rich menu nodes

Rich menu nodes also have images, text and custom CSS associated with them. This is particularly useful for demonstrating themes or content of individual pages to the site visitors.

Each image is assigned to a different menu node and is displayed accordingly.

How to set the images

Rich menu nodes

To assign an image to a menu node, view the node properties.

An advanced tab will be present where you can assign an image and a CSS class. It's also possible to add additional text to the image on this screen as well.

Feature image

To set the feature image, follow the same steps as above, but go to the "Feature image" tab at the top of the floating box.

Other options include editing/cropping the image size, adding in text and HTML to the image and linking to internal or external content.