Where Can I Access This Tool?
Inside Toolbox » Menu Manager:
What are the Default Menu Options?
By default, the Menu Manager comes with 5 different menu options.
Header Main Menu
Accessible via /home
Pricing Page Menu
Is accessible via /join
Is accessible on any page by the default
Header Mini Nav
Is accessible via /home
Login Page Links
Is accessible via /login
How Can I Edit These Menus?
By simply clicking on "Customize" under Actions on the preferred menu element.
In this instance, let's make changes to the "Main Menu".
Add an additional link by clicking on the "New Link+" button:
Once the text and the URL are added click "Save Changes". Once saved, the edited menu will start appearing above the Default Menus, an indication of its being a Custom Menu:
When clicked on "Edit" on Custom Menus:
Under "Actions" there is a drop-down option called "Edit Menu":
Once clicked, a module will display where the Nickname and System Name can be assigned for the menu:
Additionally, Custom Menus will have few options under Actions:
- Clicking Disable will disable this custom menu and its default version will be used on the website. This is very helpful for troubleshooting purposes:
- Clicking Clone will clone this custom menu and will assign a custom Menu Name and Shortcode:
- Clicking Copy Shortcode will copy the shortcode of this custom menu, with this copied shortcode, it is easy to call the menu on the preferred location like in a webpage or a widget (How To Call A Menu On A Webpage).
- Clicking Delete will delete this custom menu.
How To Create Dropdown Menus
Indent the child element under the parent field, this can be accomplished by dragging the menu element under another:
The drop-down menu shows up in the front end:
More Editing Options For Menu Links
All menu links come with a "Settings" button that allows for further changes:
- Link / Text Link CSS Class - In this section, add preferred CSS Class to the <a> element. This is ideal place to use pre-maid Bootstrap classes if needed.
- <li> CSS Class - In this section, add preferred CSS Class to the <li> element. This is ideal place to use pre-maid Bootstrap classes if needed.
- Link / Text Inline Style Attribute - In this section, add preferred style elements to the <a> element.
- <li> Inline Style Attribute - In this section, add preferred style elements to the <li> element.
- Add no-follow - This setting will indicate if search engines should follow this link or not.
- Open in new window - These settings will indicate if the link should open in a new tab or not.