Scroll elements to the top and pin them there

This tutorial will show how to scroll an element to the top of the page and pin them there (Add to the sticky header). We will use a navigation bar in the Sample Template (A website created in the Getting Started Tutorial) as an example. The navigation bar is not at the top. We will add it to the sticky header. It will be scrolled with the page until it reaches the top. The effect needs Javascript. If you visitors disable Javascript, the navigation bar will be scrolled as usual.

Only text elements, image elements and navigation bars are supported.

Select the navigation bar on the template page "template.html".
As the navigation bar was grouped with the logo at the top and will be reduced to a button on the right in mobile layout, we need to detach it from the group and let it be a standalone element. Click on this button on the toolbar. Elements that are grouped with the navigation bar will be selected.
Click on this button on the toolbar. You will see the following message. Click on the "Yes" button and the grouping will be removed.
Deselect the logo. Double-click on the navigation bar and open it in the Navigation Bar Editor. Click on the "Style" tab and then on the "Mobile" tab. Deselect the option "Show button only".
Click on the OK button to save the setting.
While the navigation bar is still selected, click on this button on the toolbar or select "Arrange" > "Add to Sticky Header" from the main menu.
You will see the following message. Click the OK button.
You can preview the page in the internal or external browsers. The navigation bar will scroll with the page until it reaches the top like the following.
As the navigation bar does not have a background color, the text on it will be hard to read. You can follow the tutorial "Change the background color of navigation bars" to change the background color of this navigation bar to white.