Navigation Menu

Under the tab titled Navigation, you can change the label and layout order of the home navigation menu for your app. You have the option to use the default "Font Awesome" icons or custom Picture Tiles. See images and instructions for both options below.

Items

After you click Navigation, the first screen you will be taken to is a list of the current menu items you have on your event's home navigation page. 

Your navigation will already be filled with a few icons, such as Sign In, FAQs, Support, etc.

To add a new navigation menu item, click Add Navigation Item at the very bottom of the screen. Your new menu item will appear at the bottom of your existing menu items.

Note: some app content features must be created first (static content, etc.) prior to creating a navigation icon linking to that feature.

Once added, use the menu item actions to influence your app’s navigation.

Below is a screenshot of the Navigation- Items screen with further details. 

1.  Menu Item Label which appears underneath the menu item’s icon.

2.  Menu Item Type to direct what part of the app you want the menu item to link to. You can also include external and internal links (more details below under the section External and Internal URLs).

• Please note: if you select an item that can have multiple options (photo gallery, static content, etc.), you will need to select which option you would like the navigation menu item to direct to. This dropdown will appear underneath the icon selection, which can be seen in the example screen below.

3.  Active will make the menu item visible on the navigation, inactive will hide it.

4.  Icon to help distinguish the menu item to users. Use the one provided, select a new one from our icon library, or upload your own! Please note: when you upload your own icons, it will reappear in the My Icons screen. Go to the My Icons tab to select your newly added icon. See the example screens below. * If you would like to use picture tiles in place of round icons, see the Picture Tile instructions below.

5.  User Visibility to decide if your menu item will appear to logged in users, anonymous/ non-logged in users, or both. In some instances, user visibility will be determined by selections on the app permissions section.

6.  Platform Visibility to decide if your menu item will appear for users using the iOS platform (iPhone), Android platform, or mobile web browser.

7.  Action icons to reorder (move up/ move down) and remove the menu item

8.  Control the look of your app’s navigation’s by clicking the tab Appearance.

Appearance

This allows you to further control the appearance of your app’s navigation and its menu items.

Instructions below apply to Font Awesome navigation only. For Picture Tiles, skip to the "Picture Tile" section below. 

To get started, click Navigation then the tab labeled Appearance next to Items. Below is a screenshot of the Navigation - Appearance screen with further details:

1. Set your Icon Ring Color to control the ring color around your menu item on the app’s navigation. (Please note: when you select “Custom Color”, you will be able to pick your preferred color from a color picker or by entering the web color code in the field below.)
2. Set your Icon Disc Color to control the inner disc color of your menu item. 3.
3. Set your Text Color Mode to change the color of your app’s text throughout the app.
4. Set a Text Custom Color by entering the hexadecimal value or pick from the color picker.
5. You can choose to use regular or large icons. Large Icons are recommended for navigations with no icon rings.
6. Choose whether you want to Display home screen on single page.  If you choose no, then the icons will be divided to fit on multiple pages.
7. Choose whether you want to Include the info sub-page.  If no is selected then you will not see the Info link highlighted in red in the image below.
8. Choose whether you want to Display the check-in sub-page.  If no is selected, then you will not see the Check-In link highlighted in red in the image below.

Picture Tiles

Picture tiles allow you to brand your app even further with custom square picture tiles. 

First create your picture tiles in Canva or any other image creating software. Consider using a custom background with icons or pictures to represent the feature. 

Note: images should be 450px wide X 360px high.

Then, go to Navigation > Appearance and select "Picture Tiles" - see number 1 in image below.

1. Select Picture Tiles
2. Select Label text color - choose from your app colors or select a custom color. This will show as the font color below the picture tile. Black (000000) or White (FFFFFFF) is the recommendation. White in the example above.
3. If you select a custom color - use the color selector or type in the HEX color code.
4. Select the Label Background color - choose from your app colors or select a custom color. This will show as a color bar behind the text. Grey in the example above
5. Select image background color - if your tile does not fill the entire square, this color will fill the space. The background color of the app is F8F8F8.
6. Info sub page shows as a separate tab on the home screen and displays your event details.
7. Check in sub page shows event check in as a separate tab in the app. You can turn this off if you will not be using event check in.
8. Click Update Branding to save your changes and then follow the instructions above to uploading your custom images, see number 4 in the "item" section above.

External and Internal URLs

You can also add external and internal links to your app navigation menu items. Simply locate the section Links within the Menu Item Type dropdown.

• External URLs: Copy and paste your external URL in the Please Enter: field that appears below the app icon. Be sure to include the leading “https://” of the URL.
• Internal URIs: You can also link to internal links within your app. Certain features allow you to link to specific items, such as attachments and maps. However, there are special cases where you might want to link to other internal areas of the app.

Start by grabbing the full URL of the page you want to link to from your web app. Then, remove everything before the context number, and add a “#” sign to the remainder of the URL. This is what you will copy and paste into the Please Enter: field below the app icon.

Below is an example screen with an internal URL to a specific app user’s profile

The original URL was http://app.resultsathand.com/rah#context/149/user/profile/2202

We removed everything before the context number, inserted “#” before the remainder of the URL and are left with #user/profile/2202.

If you have any questions with external or internal linking on the navigation or throughout the app, please contact support@resultsathand.com and we’d be happy to assist.

Select Go To App on the top navigation to see your changes. You may be required to select refresh in app’s side menu navigation to see the changes