NAVIGATION/IMAGE NAVIGATION
The design of the theme allows for 2 levels of navigation - with up to 4 image sub-pages for each main link. To utilize the built-in image sub-navigation, please follow the instructions below.
1. Click and drag the image you would like to use for the sub-navigation link to the Resources area of the project file. (The theme will automatically resize the image of your choosing to display properly for the space allotted for the sub-navigation image.) The Resources area can be found on the left panel of the project file.
2. Once your image is in the Resources area, there is a Settings area just below the Resources area. Click on the Icon labeled Code.
3. Click on the box labeled JavaScript and enter the following code:
jQuery(function(){
AddImageToNav(1,1,"%resource(my-image.jpg)%");
});
The 1,1 in the code corresponds to the numerical order of the main navigation link, followed by the numerical order of the sub-navigation link. The code above will be applied to the first main navigation link, and the image will display for the first sub-page/link.
If your site has two sub-pages for the first main navigation link, then you would use the following code to have images for both sub-pages/links.
jQuery(function(){
AddImageToNav(1,1,"%resource(my-image.jpg)%");
AddImageToNav(1,2,”%resource(my-image.jpg)%");
});
The theme allows for up to 4 sub-navigation link images for each main navigation page/link.
4. Replace the "my-image" with the name of the image. (Please ensure that the name of your image is all lowercase and does not contain any spaces, characters, or symbols. Failure to do so may prevent the image from displaying upon publishing your site.)
5. Your image/s will now display for the corresponding sub-page/s. There are also several style options for the navigation as well, including font, colors, and positioning.