Creating wide menus on your site involves only a few simple steps.
First make sure to navigate to Appearance > Menus and pick a menu which you’d like to use to display a wide menu.
Then proceed as follows:
- Select a parent 1st level menu item and set its type to wide.
Depending on the theme, an additional option called wide with icons could be set instead.
- Create up to 4 sub items, also called 2nd level menu items, corresponding to the previously created 1st level menu item.
Note: It is important that you place only up to 4 sub items, i.e. 2nd level menu items.
- Create 3rd level items.
- You can choose the whether your wide menu will be full width or not within Theme Options > Header > Main Menu.
Depending on the theme, there could be 2 options instead, one for the wide menu holder and the other for its contents.
There are several very useful features when creating menus. Not all of those will be featured in this article, but only the ones that directly relate to the creation of the wide menu.
Namely, we’ll talk about background images and custom widget areas.
Background Image
- Adding a background image to a wide menu is as simple as adding the image link inside of the appropriate field of the parent 1st level menu item
The end result should look like this:
- An image could also be added by creating a custom widget area with an image and then assigning the same widget area to a menu item.
And the end result will look like this:
Custom Widget Area
As we previously mentioned, you also have a neat option to create a custom widget area which can then be assigned to a menu item. The following examples for specific themes will show just how useful this can be.
Eola (a shop theme)
The menu structure is as follows: 1st level menu item - Store is set to Wide and has 4 sub menu items.
In Appearance > Widgets, 3 custom widget areas are created with product widgets and their product IDs.
In addition, separator widgets are added, for styling purposes.
The same widget areas are assigned to the last 3 sub menu items, respectively.
The end result should look like this:
iAcademy (online courses theme)
The menu structure is much the same as in the previous example, regarding 1st and 2nd level menu items.
The last 3 sub menu items are assigned with a custom widget area containing a course list widget.
The end result should appear like this:
Newsflash (news theme)
In this example the Parent (1st level) menu item is wide and only 1 sub item is present, whose title is hidden.
The same widget area shows Layout 4 widget (one of post layout variation widgets).
The end result will look like this:
We could suggest to check this article if you want to see how to duplicate menus in WordPress.
Video Tutorial