Topics

How to stick a menu to the top of the page

A sticky header keeps navigation available after its original position scrolls to the top of the browser. It can start at the top of the page or below an introductory section.

Build and group the header

Place a few linked buttons or a Menu over a Wide Box. Keep the choices short and make the background strong enough to separate the navigation from the content underneath. Select the background and controls, then choose Arrange → Group.

Make it stick to the page top

With the group selected, enable Custom Scrolling in the Style inspector and choose Stick to page top. Keep the group above the scrolling content in the layer order. Preview the page: the header should retain its original layout until it reaches the top, then remain there.

Building a grouped navigation bar over a Wide Box in the Sitely editor.

The example navigation bar remains at the top while the page content scrolls underneath.

Hide the header while scrolling down

Enable Hide when scrolling on the sticky group or Layout Block. It begins hiding only after the header reaches its sticky position. Scroll upward to reveal it again.

Choose Slide up to move the bar out of view, or Hide to fade it. Set the effect’s duration from 0 to 2 seconds; 0 makes the change immediate. Scroll sensitivity is the distance, in page pixels, needed to recognize a direction change. Start with the default 12 px and adjust it in Preview.

The dark demonstration bar below uses Slide up, a 0.2 second duration and 12 px sensitivity. Scroll past it, continue downward, then reverse direction. Its button returns to the top of this tutorial.

Check the header in both directions

Scroll from above the header until it sticks, continue down until it hides, and scroll up until it returns. Scroll back above its original position and check that the bar rejoins the page. A sticky group that starts lower down does not jump to the top before you reach it.

Keep navigation usable

Try the links with the keyboard and open any dropdown menus. A focused navigation control or open menu should remain available while the header would otherwise hide. Check that the bar does not cover the content visitors need to read or the destination of an anchor link.

When several headers meet at the top, choose the appropriate Stack, Overlap or Last one pushes previous behavior. A hidden auto-hide header releases its space in the sticky stack while keeping the page’s normal flow.

To retain a deliberate gap above a grouped header, include a transparent spacer box in the group. Preview the complete group rather than positioning its controls separately.

Check Preview with Reduce Motion as well: hiding and revealing should be immediate. Check the header on narrow layouts too. See Menus and Layout Blocks for the related controls.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sitely 8