ProNav‎ > ‎

ProNav Installation & Configuration

IMPORTANT: Before installing any Magento Extension always make a backup of your Magento web directories and database. Also make sure you clear your store cache (either under var/cache or in Magento Admin Panel cache management section).

If you are using any other extension that replaces the default top navigation of your Magento store, make sure you disable it before installation, as this may conflict with ProNav.

1. PRONAV INSTALLATION:

1. Via FTP

Unzip ‘pronav-3.0.zip’ locally on your machine. If your FTP client support ‘Merge’ operation you can simply upload all the files at once, otherwise simply upload extension files by mirroring the file structure in extracted archive.

Once you have installed ProNav, you will need to Configure ProNav, and then set up your Navigation Items. See Below...


2. PRONAV CONFIGURATION:

ProNav Configuration (System > Configuration > BRANDAMMO > ProNav 3.0):

Click the image below to see a set of configuration options, descriptions of each options are below each field/dropdown.

Click image to view a larger version.


3. ADDING PRONAV ITEMS:


The basic structure of ProNav is:

<ul id="pronav">
    <li>
        <a href=""></a>
        <div class="sub"></div>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
</ul>

Each list item (<li>), separates the navigation items, <div class="sub"></div> represents the drop down menu (if set for each ProNav Item).


ProNav Items (CMS > ProNav):
An overview of all the primary navigation items set up.

Click image to view a larger version.


ProNav Items (CMS > ProNav > Add ProNav Item):
This is where you add your individual primary navigation items (these are items displayed in the navigation bar) and also link them up to their static blocks for the drop down menu.

Click image to view a larger version.

  • Name * - Name of Primary Nav Item (this is what is displayed on the navigation bar)
  • URL Key - Link to click through
  • Item Index * - Defines the order of Primary Nav Items, e.g. 0 will appear first, 1 will appear next, 2 will appear after 1... etc.
  • Item CSS ID - Your custom ID for the list item (<li id="xxx">)
  • Item CSS Class - Your custom Class for the list item (<li class="xxx">)
  • Link CSS ID - Your custom ID for the link item (<a id="xxx">)
  • Link CSS Class - Your custom Class for the link item (<a class="xxx">)
  • Static Block - Choose the static block (drop down menu which appears within <div class="sub">xxx</div>) - see step 4.
  • Store View * - Choose whether this is displayed on all view stores or individual store views.
  • Is this a Link? - State whether the main navigation item clicks through to a page (uses the URL Key)
  • Dropdown Alignment - Choose whether to align the drop down menu to the left or right (this is relative to the navigation item it falls under)
  • Menu Alignment - Choose whether to align the drop down menu relative to the navigation item, or align it to the beginning of the navigation bar or the end of the navigation bar (the last 2 will override the Dropdown Alignment option)
  • Add nofollow? - Adds nofollow to the primary navigation item
  • Status - Enable or Disable this primary navigation item

Video Walkthrough:
* Please Note: New fields have been added since the making of this video.


4. ADDING STATIC BLOCKS:

This is where we will now create our drop down menus, these are created into static blocks, which are referenced from the ProNav Items. To create the menu that appears please see our dedicated static blocks page.
Comments