Configure the header of a web experience for different screen sizes in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, header layouts can be modified to effectively display web experiences on various devices such as mobile phones, tabs, or desktops, in which the screen sizes are small, medium, and large. The header layouts can be modified to fit the screen size to optimize the user experience when viewing on different devices.

This article describes the workflow to modify header layouts for small, medium, and large screen sizes for a web experience in ArcGIS Experience Builder.

Procedure

1. Open the ArcGIS Experience Builder web experience.

Note:
Certain full-screen app templates use a header created with a Fixed Panel widget instead of the Header setting from the page. If this is the case, refer to Step 2 to enable the header to configure it.

2. On the Page panel, enable the Header option, if necessary.

3. On the top ribbon, click the screen button to edit the page. In this example, the medium screen page for medium screen devices is configured.
4. On the canvas, next to the header, click Custom to modify the header for medium screen devices.

Note:
When Auto is selected, the header layouts are synchronized for all screen sizes.

5. Click OK when prompted through the Are you sure you want to enable it? window.
6. Hover over the canvas header and click Edit header to configure the header layout.

1. Add and connect widgets to the header layout as desired. Refer to ArcGIS Experience Builder: Add and connect widgets for more information.
2. To remove a widget from the current screen size, click the widget and click the Move to the pending list button. In this example, the Print widget is moved to the pending list as it is unnecessary to be displayed on medium screen devices.

Note:
Deleting a widget removes the widget from all screen sizes. Moving the widgets to the pending list hides the widgets from the current screen and they can be added back to the canvas from the Pending tab on the Insert widget panel.

3. Arrange the widgets accordingly to proportionately fit medium screen devices.

7. On the top ribbon, click the other screen sizes and repeat Steps 4 through 7 to modify the header layout.
8. Click Save to save the configurations.

The image below displays the header layouts for the medium screen size.