Dealers frequently require changes to be made to their navigation. There are two different types of nav snippets you may encounter, as laid out below.
Basic Nav
Editing the Basic Nav is generally pretty simple and straightforward.
Navigate to the Snippets folder for the dealer and find the nav snippet.
Once you’ve found the nav snippet, open it up and open the Source Code.
In the Source Code, you will see the nav setup laid out with all of the current nav options already in place.
Adding a new page to the top-level menu
To add a new page to the top-level menu, you can either copy an existing page with no dropdown and edit it to have the appropriate URL and title, or utilize the following basic code to add a menu item. <li><a href="/URL">NAV TITLE</a></li>
Please note that if the URL is supposed to open in a new window (for example, a link to another site like Google Maps, a parts store, etc) you should use the following basic code instead: <li><a href="/URL" target="_blank">NAV TITLE</a></li>
Adding a new page to a sub-menu
To add a new page to a sub-menu, you can either copy an existing page in the sub-menu and edit it to have the appropriate URL and title, or utilize the following basic code to add a sub-menu item.
<li><a href="/URL">NAV TITLE</a></li>
Make sure your <li> is within the <ul class="dropdown"></ul> area beneath the dropdown for the category to ensure it will show up on the sub-menu.
Please note that if the URL is supposed to open in a new window (for example, a link to another site like Google Maps, a parts store, etc) you should use the following basic code instead: <li><a href="/URL" target="_blank">NAV TITLE</a></li>
Adding a new dropdown item to the top-level menu
To add a new dropdown item to the nav, you can either copy and existing dropdown, or use the following basic code.
<li class="dropdown"><a data-toggle="dropdown" href="#">DROPDOWN TITLE <i class="fa fa-caret-down" aria-hidden="true"></i></a><b data-toggle="dropdown"><i class="fa fa-plus" aria-hidden="true"></i></b> <ul class="dropdown-menu"> <li><a href="/URL">SUB-MENU LINK</a></li> </ul> </li>
The dropdown must have at least one item under it for it to work properly, but preferably, it should have 2 or more. We do not want to have a dropdown menu if there is only one item displaying beneath it. Remember that best practice is the top level of a dropdown does not have a link! From a user experience perspective, make sure to consider if it makes sense having a dropdown where it is being placed, and if not, how we could arrange the nav in an alternate manner.
Once you have added your item to the nav snippet, you can exit out of the Source Code mode, and Save & Publish the snippet.
Mega Menu Nav
Mega Menus tend to have more complicated setups, additional CSS styling, and oftentimes images or icons are included as well. This makes them a little more difficult to add items to. A few common additions or changes are broken down below.