Advanced Navigation

Infigo now has a new module which can be added to your storefront using our layout manager - the Advanced Navigation module.

This module allows you to create a navigation bar which can be easily changed, adding new elements to it through our NavEditor. Once you have created the navigation bar as you would like it, you add the same navigation bar to any of your storefronts by adding the module through the layout manager, as this module will be the same across all pages of your storefront.

 

Steps

1. Sign in as a storefront administrator. Go to the front end of the site.  Choose the page you want to add the advanced navigation module to, then, at the bottom left press the layout manager button:

mceclip0.png

2. This will expand into the layout manager, under Modules select Advanced Navigation. Under Containers, choose where you want it to appear on the page.  We recommend you add this module to NavLower. Then press Add Module to Container

 

Child_Item_screenshot_Final_1_Edited.png

 

3. This will add the Advanced Navigation bar to your storefront, however at this point it will not be populated and will not be styled. You can populate the navigation bar by reopening the layout manager and clicking Enable Nav Builder

 

Enable_Nav_Builder_screenshot_2.PNG

 

 

This will now add the "Add Item" button to your Advanced Navigation bar, as well as change the look of the layout manager:

 

Add_item_Screenshot_3.png

 

4. Click Add Item to get started.

 

Add_item_2_Screenshot_4.png

 

Your New Menu Item is now added to the navigation bar. You can also add more items vertically and horizontally across the bar. 

 

New_Menu_item_screenshot_5.png

 

5. At the bottom of the control panel, you will now see 5 new menus, and these will affect ONLY the currently selected menu item. 

 

5_Menu_screenshot_6.PNG

 

Below are instructions for each of the five menu items:

 

5aEnter Menu Item Title

This is simply the text displayed on the menu item. As you can see in the screenshot prior to configuration, this is currently set to "New Menu Item".

 

New_Menu_Item_screenshot_7.png

 

For this article, it has been renamed to "Business Cards".

 

Business_Card_Screenshot_8.png

 

As you can see, it now reflects in the navigation bar at the top of the page:

 

Business_Cards_2_Screenshot_9.png

Press Save

5b. Select Link Type

Here is a dropdown which will allow you to change the link type from static to dynamic. A static link example would be www.yourstore.com/products, which will always take you to that exact URL. A dynamic link would be /products which will always take you to the location <storefronturl/products>. Dynamic links will allow you to make sure that the links do not break under circumstances such as purchasing a new domain name for your storefront, or applying SSL.

Note currently, only static links are supported by this feature.

 

Static_screenshot_10.png

 

The field below the dropdown is the field in which you can enter your URL, it is pre-populated with a # so that the link does not point anywhere by default. For this configuration, it is pointed to a Business Cards Category Page:

 

Static_2_Example_Screenshot_11_3.png

 

5c. Dropdowns

  • Simple Items
    • This is the default dropdown type to choose from, and it is as the name implies - simple. All this setting will do is display text in the item which serves as the link.

Simple_items_screenshot_12.png

  • Thumb Items
    • Thumb items are similar to Simple Items, except they utilise the "Upload Custom Image" setting, allowing you to have a menu item with an annotated thumbnail image instead of some simple text. As stated previously, everything in this module is can be directly targeted through CSS so you can manipulate this image, remove the text associated with it etc.  
      • Upload Custom Image
        •  **Please note, you cannot add a thumbnail image to the first item in the navigation, it can only be assigned to children items.

This allows you to upload an image to be used as the thumb image of the menu item. As mentioned in the dropdown type explanation, this will only appear if the dropdown type is "Thumb Items". Like most elements of this navbar, this image can be targeted directly using CSS so you can style it how you wish.

In order to upload an image, you simply click "Choose File", select the file from your folders, then click "Upload". Press Save. You will see the image is now in the dropdown. You can also remove the text if you wish. 

 

 

Upload_Custom_image_screenshot_15.png

 

  • Lastly, there is also a "Delete" button which will remove the currently selected item, however note that this will also remove all items which have been added since the "Save" button was last pressed, so make sure to save your work as you are doing it.
  • Simple Items In Columns
    • Start by selecting your parent item. In this case its 'Business Cards'. Set the dropdown to Simple Items in columns. Press Save. 
    • Now click add new, you will see that you get a thumbnail selection first, then two Add Items under it: 

Simple_Items_In_Columns_screenshot_16.png

 

  • You can also make multiple categories align next to each other. First, make your Main Category Simple Items in Columns. Then press Add Item on the right, make this one Simple Items in Columns. Be sure to save.

 

Upload_Custom_image_2_screenshot_16.PNG

 

  • Now, press Add Item on both of your Parent Categories. Click on the second Parent - in this case New Menu Item. Now, hover over Business Card.

Upload_Custom_image_screenshot_16.png

 

  • Press the bottom Left Add Item to combine these two categories:

 

Upload_Custom_image_screenshot_17.png

  • They should now be added together:

 

Upload_Custom_image_screenshot_18.png

 

  • By pressing the largest Add Item, you can add in another column to the right:

 

Upload_Custom_image_screenshot_19.png

 

  • You will need to delete the second category you created as this was just a placeholder. Deleting it will not remove the work you have done on the first category. Pressing the smaller Add Item buttons will add items vertically. 

 

Upload_Custom_image_screenshot_20.PNG

 

5d. Item Type Description

Any text you enter into this field will appear in the HTML of the object. This allows you to target each menu item individually through CSS as this setting can be different for each item.

**At this time, the HTML field is non functional. 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.