Style a mega menu

Introduction

Mega menus present you with a huge range of styling options – almost all the options available to create web pages are available to design menus. Below is a small example of designing the content area of a mega menu. Check out our article on the Menu widget for a full view of all the ways you can style the Menu widget itself.

Designing the mega menu

The article assumes you know how to create a mega menu. Again, for this example, we’ll be using the Bread Bakery Website Kit. 

This time we’re going to create a menu that has an image, a heading, and a description pop up when visitors hover over the menu item.

1. Create a mega menu as outlined in the above mentioned article. But this time, do not add an image widget to the content area. 
2. Select the Our Bread menu item.
3. Drag a container element to the content area. Check out our container learning path to learn about all the design possibilities with containers. 
   
4. In the Content tab, set the Direction to row-horizontal. This will let us put text elements next to the image element.
   
5. Drag an Image widget into the container.
6. Add an image and set the size to Medium (300×300).
   
7. Drag another container to the right of the image widget.
8. Set this second container’s direction to column-vertical.
9. Drag a Heading widget into the second container.
10. In the Content tab, enter the text Our Bread.
11. In the Style tab, under Typography, change the size to 1 EM.
12. Drag a Text Editor widget under the Heading widget.
13. In the Content tab, enter, Our artisanal breads are created using only the finest ingredients and baked to perfection. Each loaf boasts a crispy crust over a soft, fluffy interior, bursting with flavor. From classic nut breads to creative gluten-free rolls, our breads are the perfect complement to any meal or occasion.
14. In the Advanced tab set the width of the widget to 25% and the left padding to 5%
    

The content area should look like this:

Preview the heading to see how it will appear to visitors who hover over the menu item.

Next steps

Mega menus not only look stylish, but can contain layers of menus and sub-menus. Learn how to include sub-menus in a mega-menu.