CommerceGurus

Boulder has 2 WordPress Menu locations:

• Primary Menu - this is your primary website menu which appears next to your website logo.
• Mobile Menu - this is an optional menu. If you leave this blank your primary menu will be loaded as your mobile menu.

To setup your menus you will first need some pages! Once you've got some pages, go to Appearance->Menus. If you imported the Demo Data you will see something like this.

By default the Primary Menu is selected. To assign this menu to a theme location, check the Primary Menu checkbox and hit "Save Menu". This will assign the Primary Menu to the Primary Menu theme menu location. Once this has been assigned, go checkout your homepage for the first time in this tutorial and you should see something like this.

Your primary menu has been setup correctly! A little bit more about the Primary Menu The primary menu location supports single column dropdown and multicolumn mega dropdowns as demonstrated with the demo data. Single column dropdowns In the Primary menu any child pages will automatically be added to a single column dropdown. So this structure:

Will become this on the frontend

Mega Dropdown

To setup a mega dropdown, you'll need to do the following:

Setup Parent and child page menu items just like you would do for a single column dropdown, except this time instead of one Parent->Child group of pages, you'll now create multiple Parent->Child groups under a single Parent item. Confused? Let's illustrated with an example :)

Now to make this a Mega Dropdown you'll need to add a custom css class to the main parent item. To do that, you'll first need to do the following: Scroll up to the top of your WordPress screen and click the "Screen Options" menu. This will reveal a pull down menu from the top of the screen. Check select boxes for "CSS Classes" and "Description".

You can now close the Screen Options menu. Now back down in your menu expand the main parent menu item - in our example above that's the "Shortcodes" menu item. Enter the following values:

URL: Make it a "#" symbol.
Navigation Label: This is what your menu item will be in the menu itself.
CSS Classes: "menu-full-width" (This is the magic sauce that changes this into a Mega Dropdown.

Boulder also supports adding images to Mega Dropdowns as follows:

• Create a custom menu item
• Give it a navigation label which will serve as a heading which will appear just above your image
• The url should be a "#"
• Create a custom menu child item
• Navigation label should be "image"
• CSS Classes should be: "image-item"
• The Description field should be a path to an image on your server as follows:

The end product of all this work will be a super looking Mega Dropdown a bit like this one:

To add the banner just above your mega menu content (as shown by the 1200*250 placeholder image above, please go to Theme Options -> Main menu images.  From there you can upload a menu banner for each of your primary menu items. Please note it will only be displayed where a primary menu item has a mega dropdown setup within it. And that's your Primary Menu setup complete!