Bishop Documentation

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

Back to top

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 'create a new menu' option on top menu navigation bar to create a new menu. For this demonstration, we have called our “megamenu”.

**Important – use all lowercase letters.

Click "Create Menu" Button on the right to save the new menu. Check the "Main Navigation" in Menu Setting Notice also that we have changed the “Theme Location” (right) to “megamenu”.
06
Be sure to CLICK SAVE.

2. Enable Css Classes and Description

Back to top

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 and DESCRIPTION boxes.

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

3. Insert the pages

Back to top

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.
06
Now our Navigation Bar looks like this:
06

4. Create the Megamenu

Back to top

Now we can begin the MegaMenu.
Now, go back to your “Menus” page and scroll to the “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 Classes” 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
You can also set a background image throw “image” field or set an icon to display near the title link:
**Note – the “Description” field will automatically be filled.

06
06
Now we can add some Sub-Categories under “Genre”. We will add "Shirt" , "T-Shirt" , "Shoes" and "Bag".
06
Now we will add a new Category called “Brand” so that users can shop for their address via different brand:
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’we chosen, and with the “Shop By” MegaMenu.
06
You can add a maximum of 4 childs to the link wich have css classes setting with “megamenu” value, in the example below the childs of link Features are General Pages, Blog Pages, Portfolio Pages and Key Features. 06
You may continue to experiment with your MegaMenu, including adding images to it, and so forth, if you need more help, submit a ticket in our support forum