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

Setting the main site menu

To set up a main menu on Angle 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.

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. Type inside the Title Attribute field the name of the font-awesome icon you would like to apply, e.g fa-cogs.
  3. Hit Save Menu. layout

layout

Creating a button menu item

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. In the CSS Classes (optional) text field type the nav-highlight class.
  4. Save the menu. layout layout

If you would like to have a transparent highlight effect, type the nav-highlight-ghost class instead. layout

The nav-highlight and nav-highlight-ghost classes only apply on root menu items.

Adding a separator between menu items

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. Type inside the Title Attribute field the word divider.
  7. Hit Save Menu.

layout

layout

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 Angle.

  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
Take a look at the video on how to create a Mega Menu: Creating a Mega Menu
Take a look at the video on how to set a menu to be transparent: Setting a menu to be transparent

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. Expand the Mega Menu item that you want to make linkable and type the full URL in the URL field, as shown in the screenshot below.
    layout
  3. Save the menu.

Adding background images to Mega Menus

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 Angle 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