In this support article, we will be showing you how to understand menus on your CloudCanvas website. We will guide you through creating new menus for various locations on your website and explain in brief the advanced features available.

Introduction to the menu and menu locations

In this example, we will be showing you the theme locations used with a basic Divi theme install on CloudCanvas. You can create an unlimited number of menus and themes allow you to place them in certain locations. Each theme will have different available locations, these are the locations with Divi.

Primary Menu
This is the top menu that is used for core links within your site.

Secondary Menu
This is an optional menu that doesn’t need to be used, it will appear on the top menu bar if active and should be used for secondary links such as ‘My Account’, ‘Login’, ‘Contact’, etc.

Footer Menu
The footer menu will appear right at the bottom of the page just above the site copyright details, it is a horizontal menu and can be used for links such as ‘Terms and conditions’. Scroll to the bottom of this page to see how we have used the footer menu.

Primary and Secondary Menus

Primary and secondary menus used on hfdtraining.com

 

Footer menu on adamhaworth.com

Footer menu used on adamhaworth.com

 

Changing the menus

You can access the menus on your CloudCanvas site admin by opening the admin menu and going to ‘Appearance’ then ‘Menus’:

Finding menus in the CloudCanvas admin

 

The menu admin screen will look like this:

Menu Admin Screen

There are a few components to understand on the menu admin screen. The menu structure is what makes up the menu, in this example we have the primary menu selected.

Adding items to your menu
You can add more menu items to the menu structure by selecting from the right hand panel. Check the item you want to add and click ‘Add to Menu’. Once in the menu you can simply click and drag the menu items to reorder them.

  • Locate the panel entitled Pages.
  • Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  • Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  • Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  • Click the Save Menu button once you’ve added all the menu items you want.

Items don’t have to be added from the pages panel only, you can select items from any of the available panels.

Deleting menu items
You can easily delete unneeded menu items, click the expand arrow on the menu item you want to delete to show more options. Simply click ‘Remove’ in the additional menu item settings.

Deleting a menu item

How to create sub multi-level menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

Multi-level Nested menus

The menu editor allows you to create multi-level menus using a simple ‘drag and drop’ interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the ‘child’ underneath its ‘parent’ and then drag it slightly to the right.

  • Position the mouse over the ‘child’ menu item.
  • Whilst holding the left mouse button, drag it to the right.
  • Release the mouse button.
  • Repeat these steps for each sub-menu item.
  • Click the Save Menu button in the Menu Editor to save your changes.

 

 

Advanced Features

There a lot of advanced features with the WordPress powered CloudCanvas menus.

Additional settings and menu panels via screen options
Open the screen options panel up by clicking ‘Screen Options’ or the small cog symbol in the top right hand corner of the screen. You can activate additional options here by selecting the options available.

Menu Screen options

 

Menu items settings
Overview of advanced menu options.

Advance options on menu items

Navigation Label
This field specifies the title of the item on your custom menu. This is what your visitors will see when they visit your site/blog.

Original
A link to the original source of the menu item (e.g. a link to view the post or page).
Following items are hidden by default. Use Screen Options to show the required fields.

Title Attribute
This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.

Link Target
Select “Same window or tab” or “New window or tab” from the pulldown.

CSS Classes
Optional CSS Classes for this menu item

Link Relationship (XFN)
Allows for the generation of XFN attributes automatically so you can show how you are related to the authors/owners of the site to which you are linking. See Link Relationship for details.

Description
Description for this link. The description will be displayed in the menu if the current theme supports it.

  • Click on the arrow in the top right-hand corner of the menu item to expand it.
  • Enter the values for the required fields that you want to assign to the item.
  • Click the Save Menu button to save your changes.