Diamond includes 5 menu location options:
- Main: Used for the main navigation bar in the header.
- Footer: Used for the bottom right side of your site.
- Mobile Icons: Used for mobile menu only. No text. Just icons supported.
- Mobile Menu Alternative: If set, will display instead of the main menu on mobile devices.
- Top Bar: You can add addresses to contacts phone and mailing address or select menu.
Create A Menu
Go to Appearance > Menus and click the link to create a new menu.
Assign Your Menus To Locations
If you imported the sample data then you should have also imported our sample menus. To assign them you can either edit each menu individually to add a menu location, or click on the Manage Locations tab to assign menus to each location at once.
You can easily add icons to your menu items if you wish. Simply use the Diamond font_awesome shortcode inside the label with the name of your font awesome icon of choice.
You can find a list of the icon class names at FontAwesome.
Icons Without Text – Removing Extra Margin
By default all icons added to the menu have a margin to the right to leave space for any text next to it. However, if you have a menu item that is ONLY an icon without any text it will leave extra space for no reason. To remove this space simply add the “no-icon-margin” to the menu item as shown below:
This theme will allow you to easily create a local scrolling menu by simply assigning a specific classname to your menu items to create a smooth animation as well as position your fixed header perfectly during the local scroll.
Create Rows With Custom Local Scroll ID’s Using The Visual Composer
On the page that you want to add local scroll to, add a row and click the pencil icon on the top right of the row to edit it. Then in the Local Scroll ID field add a unique ID for this section. This unique id should not have any spaces but you can use numbers, under-scores and dashes.
Important: Do NOT add the # symbol to your ID, it isn’t necessary, just give it a unique name. Do not use spaces, only use dashes and underscores.
Create or Update An Existing WordPress Menu
Create a new menu or update an existing menu (Appearance > Menus) and add custom links for each menu item. Add the link link with the class “local-scroll” and with a URL that is # symbol followed by the div ID you are linking to (this is the name given in the “Local Scroll Id” field in your Visual Composer Row).
You can enter the url as simply “#section-one” or with the full URL “http://www.site.com/#section-1” if you want the menu item to be clickable from other pages of the site.
Adding The Local Scroll Menu To Your Site
You have 2 main options for adding the menu to your site via the built-in theme functions which are mentioned below:
1. Adding A Local Scroll Menu Site-Wide To The Site Header
The first option is to display your menu inside the main theme’s header which can be done by simply assigning the menu to the “Main” menu location as mentioned in the docs here. And of course, make sure that your header is enabled on the site otherwise you won’t be able to see it.
2. Adding A Local Scroll Menu Inside A Page
If you are looking to create a local scroll menu outside the scope of a defined menu region such as the Top Bar or Header menu you can use the Diamond “Navigation Bar” module to insert any custom WordPress menu on a page.
Custom Local Scroll Header Menu For Just One Page?
If you want a page with a local menu that you created only for that specific page and keep your normal header menu on all of your other pages you can do so by selecting it under the page settings. This can be useful for landing pages that are not a “part” of the “standard” site.
You can easily create some simple mega menus with 1,2,3,4,5 or 6 columns by simply adding a couple classes to your parent menu item.
First, create your menu. Then add the classname “megamenu” in the CSS Classes box for the parent item you want to have a mega menu dropdown on. Also add the classname “col-3” where 3 can be exchanged for 1,2,4,5 or 6 based on how many columns you want for your mega menu.
Nest items that you to be a part of your mega menu under the parent, and then add more items under those to create multiple columns (multiple dropdowns). Each sub-dropdown will become 1 column.
Your mega menu should look something like the screenshot below (will vary on the columns you choose of course).
Hide The “Headings”
To hide the main headings you simply need to add the classname “hide-headings” to the same menu item that has the “megamenu” class applied to.
You can easily create non-clickable menu links to any WordPress menu by symple adding a # symbol for the “URL” when inserting a custom link. However, when a user clicks it a # symbol will be added to the URL. Diamond includes a unique class “nav-no-click” which you can add to any menu item so that the link is 100% un-clickable.
Diamond by default includes 2 different mobile menu styles to choose from. Below are the instructions for selecting your mobile menu style.
Selecting Your Mobile Menu Style
To select your mobile menu style simply log into your WordPress dashboard then go to Appearance > Customize > Header > Mobile Menu. Here you will be able to select your preferred style from a dropdown.
By default all sub-dropdown items on the main menu open to the right, however, if you have dropdowns on the far right this could cause them to go off the screen which isn’t good. For this reason Diamond has a few useful classes to make items open to the left instead of the right.
Diamond includes an advanced functionality to display custom menus on a per page basis. Simply create your custom menu and select it from the Page Settings for the page where you want it different.
In order to add classnames to your WordPress menu item you must first enable the classes field in your menu dashboard which is located in the “Screen Options” tab in the top right corner. See the screenshot below for more details:
IMPORTANT: You MUST be using the using the “Right Aligned Icon Buttons” or the “Under The Logo Icon Buttons” toggle button style for your mobile menu for this to work. This is the default option but if you have altered it it can be located at Appearance > Customize > Mobile Menu > Toggle Button style.
The mobile icons menu works a bit differently. To create your mobile menu you need to create a new menu then instead of adding the names of your pages such as portfolio, blog, contact…etc, you would change the Navigation Label to the icon class you want to display for that menu item. Please see the example below.
You can find a list of the icon class names at FontAwesome (for the mobile icons menu you want to add just the name not the fa- part of the class as you can see in the screenshot above).
In the Diamond theme you can create a custom menu and assign it to be used for mobile devices only. To do this simply go to Appearance > Menus and create a new menu and add the items you want. Then assign it to the location.