Back to top

The MegaMenu

Now that you have tweaked your pages, it’s time to learn how to build a unique menu or MegaMenu.

1. Create a menu

In order to build a beautiful MegaMenu, you will first need to create a new menu. Go to the left side of the WP-Admin panel, find “Appearance,” then “Menus”.

Now click the + option on the top right menu navigation bar to create a new menu. For this demonstration, we have called our “megamenu”.

**Important – use all lowercase letters. Notice also that we have changed the “Theme Location” (right) to “megamenu”.
06
Be sure to CLICK SAVE.

2. Enable CSS Classes

Now scroll up and find the “Screen Options” at the top right of the Menu, and click on the drop-down arrow: Now the screen looks like this:
06
No matter what other items are checked, to create a MegaMenu, you MUST click/check the CSS CLASSES box.

CLICK “SAVE MENU” and close the Screen Options view.

3. Insert the pages

Next, choose the Pages that will show on your MegaMenu. To do this, scroll to the bottom left of your Menus page and find “Pages”. Click on the Pages you want to show. **Note - Sometimes only the “Most Recent” pages show. Click “View All” to show all your pages. Here is a screenshot of the pages we added:
06
**Note – the pages are in random order. This is how they will show on the Navigation Bar:
06
We DON’T want our pages in random order, so we will now return to the Menu Page and drag the pages to the order we desire. Remember to click each drop-down button to change the names of the pages you have chosen (as demonstrated in Section 5 – Menus). Below, we changed several names:
06
Now our Navigation Bar looks like this:
06

4. Create the Megamenu

Now we can begin the MegaMenu. At the present moment Video Tutorials for Panthea are not available, but you can use Sistina ones because the feature is the same. To follow the link to the detailed MegaMenu video created by YIThemes click Here and watch the video as many times as you need in order to understand how to create the MegaMenu.

Now, go back to your “Menus” page and scroll to the “Custom Links” section on the middle left. Change the “URL” to “#”, and change the label to whatever you want in your menu. In our example, we will change the label to “Shop By”.
06
Now click “Add to Menu”, and “Shop By” will appear on your menu.

Drag it in the order you want it to appear on your Navigation bar.

Next, click on the drop-down arrow of the “Shop By” icon, and when the screen opens up, find “CSS Class” and type “megamenu”.
06
Now decide what Categories you want to list under “Shop By.” In our demonstration, we will begin with “Genre” so users can shop for books via Genre.
06
After clicking “Add to Menu,” the “GenreCategory appears on the menu, and we arrange it under the “Shop By” category:
06
Now we can add some Sub-Categories under “Genre”. We will add "Man Collection" and "Woman Collection".
06
Now we will add a new image Category called “Mega1”:
06
Here is what our Menu looks like after adding the Brand Category and several Sub-Categories:
06
Now CLICK SAVE, then navigate to your Home Page. Here is a visual of our new Navigation Bar with all the pages we’ve chosen, and with the “Shop By” MegaMenu.
06
You may continue to experiment with your MegaMenu, including adding images to it, and so forth.