Understanding Top Level Navigation

Article Number: 598 | Rating: Unrated | Last Updated: Tue, Nov 17, 2015 at 12:10 PM

The drop-down navigation across the top of your website is primarily driven by the categories as defined in your NCR Counterpoint system. In addition to the categories, you can easily add a Home link at the beginning ( System / Configuration / Theme Settings / Header ). You can also choose to display the built-in New and Specials links at the end of the navigation bar ( System / Configuration / Theme Settings / Navigation ). Learn more about New and Special Pages .

Dropdown Choices

You have three basic layouts for dropdown menus in NRO:

Single Column (example: CelebritySkin1 )
Multi-Column (example: CelebritySkin2 )
Multi-Column with HTML content (example: CelebritySkin3 )

Single Column Layout:

To use a single column layout, select the Standard menu style under System / Configuration / Theme Settings / Navigation .

Multi-Column Layout:

To use a multi-column layout, select the Enhanced menu style, and optionally choose to display category descriptions. If a category description exists in Counterpoint, the drop down links will be displayed in two columns with a text area on the right. If no category description exists, the dropdown links will display in four columns. Note that category descriptions support text and basic HTML. Whatever is entered into the category description field in Counterpoint will display in the dropdowns as well as at the top of the category landing page.

Category Sort Order

In short, the order of the categories on your site will match whatever is uploaded from Counterpoint. Learn more: How do I change the display order of the categories in my storefront?

Adding Links to Content-Only Category Landing Pages

You can add links to your navigation that land on pages within your site by creating Content-Only Category Landing Pages .

Adding Links to Other Sites or Pages

If you want add links to other sites (like Facebook) or to existing pages within your site (like About Us), it takes stronger HTML skills. If you need assistance, please contact Professional Services for an estimate.

In this example, we’ll add an About Us link to the end of the navigation bar:

1. Create a new static block, for example nav-extras , under CMS / Static Blocks
2. Add the following to the code view (not the WYSIWYG view):

<!— MANUALLY ADD LINK TO NAV BAR -->
<script>jQuery(document).ready(function(){
jQuery('#nav').append('<li><a href="http://demo.nrostores.com/about/">AboutUs</a></li>')
jQuery('#navstandard').append('<li><a href="http://demo.nrostores.com/about/">AboutUs</a></li>')});
</script>

3.Create a new widget under CMS / Widgets , and attach the newly created nav-extras static block to the page header of all pages.