Menu

How to setup your menu

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Menus

Creating a menu

You can create a menu from Appearance->Menus. To see a detailed guide of how to create a menu in Wordpress, have a look through the related wordpress codex article here.

Note: When you are creating a menu with a dropdown, make sure that the parent link is a Custom Link post type in the menu, which has the URL field set to #. Leaving this field empty would result in unexpected behavior on some devices.

e.g layout

Setting the main site menu

To set up a main menu on Lambda theme (assuming you have created a menu or imported the demo content) click on Appearance>Menus. Select your main menu from the drop down list.

Mega Menu

Creating a mega menu

A Mega Menu is a menu that is designed to hold a large amount of pages, organised in columns. Follow these simple steps to build it in Lambda.

  1. Go to Appearance->Menus.
  2. Locate the Screen Options tab and tick the Mega Menu and Mega Menu Columns as shown below. layout
  3. On the accordion on the left of the Menu Structure you should now see two extra options, Mega Menu and Mega Menu Columns. Click on the Mega Menu to expand. Add the Mega Menu as if it was a page by pressing Add to Menu.
  4. Now that you have the Mega Menu menu item, time to put the columns that will hold the menu items. Decide whether you want three or four columns. Add the one that you wish as a submenu of the Mega Menu. The Navigation Label of each column will be the name of the column on the menu.
  5. Do the same for as many columns as you wish to add.
  6. Add pages to each column as a submenu. See the images below to get an idea. layout layout

Hide and show mega menu column borders

In order to show/hide column borders for a mega menu follow these steps

  • Go to Appearance->Menus and edit the menu that you want
  • Locate the mega menu item that you want to edit and expand it by clicking on the small arrow next to the menu item's name. layout
  • Locate the Show Columns Borders option and set it to On.
  • Save the menu layout

Adding menus to mega menu column

In order to add menus to a mega menu column follow these steps

  • Go to Appearance->Menus and edit the menu that you want
  • From the left side of the screen, add the menu items that you want by selecting them and clicking the Add to Menubutton.
  • The menu items should now be added to the bottom of the menu as single menu items. Drag and drop each one of them below the mega menu column that you wish, having carefully indented them one space to the right of the mega menu column. layout
  • Save the menu

Setting clickable Mega Menu items

Should you have the menu set to work on hover, we have added an extra functionality, which allows you to make the mega-menu items clickable. You can set those links if you follow these simple steps.

  1. Go to Appearance->Menus.
  2. Locate the Screen Options tab and tick the Description as shown in the screenshot below. layout
  3. Expand the Mega Menu item that you want to make linkable and type the full URL in the Description textarea, as shown in the screenshot below. layout
  4. Save the menu.

Setting mega menu background

You can add an image backround to Mega Menus by following these simple steps.

  1. Find the url of the image that you want to use as a background.
  2. Go to Appearance->Menus and edit the menu.
  3. Locate the Mega Menu item and expand it.
  4. Add the url of the image to the Background Image URL field.
  5. Save the menu mega-menu mega-menu

Adding widgets to Mega Menus

A new feature that Lambda offers is the ability to add widgets to Mega Menu columns. If you want to use a Mega Menu column as a widget position follow these simple steps

  1. Go to Appearance->Menus and edit the menu.
  2. Locate the Mega Menu Columns item and expand it.
  3. From the Use Column As Widget dropdown list select the On option.
  4. Save the menu.
  5. Go to Appearance->Widgets. A new widget position should now exist named after the name of the column.
  6. Add a widget and you are done!

Menu Widget


Special menu types

Divider menu

To add a separator between menu items follow these steps.

  1. Click on the accordion item Links on the left hand side of the page.
  2. Fill in the URL field with a simple #.
  3. Hit Add to Menu.
  4. Move the new item to the place of the menu where you want the divider to be placed at.
  5. Expand the menu item by clicking on the small arrow on the right side of the item.
  6. From the Special Menu Item dropdown option choose the Divider option.
  7. Hit Save Menu.

layout

layout

Button menu

Adding icons to the menu items

To add an icon next to a menu item follow these steps.

  1. Expand the menu item by clicking on the small arrow on the right side of the item.
  2. From the Menu Icon dropdown choose the icon that you wish.
  3. Hit Save Menu. layout layout

Creating a icon only menu

WordPress requires that all menu items have a title, otherwise they will not be saved. To get around this we have created a special filter to allow you to create a menu with no title and just an icon. Here is how

  1. Add a new Menu Item to your menu from the left sidebar on the Appearance -> Menus page.
  2. Expand the menu item by clicking on the small arrow on the right side of the item.
  3. Enter ICON_ONLY as your Navigation Label.
  4. Select a menu icon from the drop down menu.
  5. Hit Save Menu.

icon only menu

Special menu items

If you want to make a menu item stand out from the others, you can highlight it, giving it a button-like view. Follow these simple steps

  1. Go to Appearance->Menus menu.
  2. Locate the menu item that you want and expand it.
  3. From the Special Menu Item dropdown list select the Button Menu option.
  4. Save the menu.

layout layout

If you would like to have a tansparent highlight effect, select the Bordered Button Menu option instead. layout

The Button Menu and Bordered Button Menu options only apply on the root menu items.

Adding labels to the menu items

To add a label next to a menu item follow these steps.

  1. Expand the menu item by clicking on the small arrow on the right side of the item.
  2. Type inside the Extra menu label field the name of the label. Then, you can choose a label type from the Label Type dropdown for e.g Success.
  3. Hit Save Menu. layout layout