How to stick a menu to the top of the page

A sticky header is a navigation structure that retains its position at the top of the browser window, as you scroll down a web page, instead of scrolling away. The navigation structure can initially be further down the page. It is a commonly used element and, if your website has a lot of content, you probably should implement at least a basic form of it, such as a navigation bar with a menu.

To create a simple header, begin by placing a few text buttons over a wide box. The buttons will be links to pages of your website, or to scroll locations on the same page. A number of 3 to 5 buttons is usually enough to highlight the main features of a website without overloading the bar. A menu element can work in lieu of buttons as well. Select all of the buttons and the wide box, right click to open the menu and select group, or select group from the Arrange menu at the top of the screen. The newly created group offers the stick to top option in the style tab.

Enable the stick to page top checkbox, now your group will stick to the top of your screen. 

Remember to take care of any visual conflicts that might appear from your header movement. In this example a white border on the header’s background box ensures it is differentiated easily when positioned in front of the page content, and is consistent with the white borders used to separate elements in our pages. Consistency is important, and often offers natural solutions, such as in this case.

Note that if the initial placement of the header is not at the top of the screen, it will get attached to it when scrolling, once it comes into contact. Furthermore the attachment will occur once the first component of your header comes into contact. The structuring, and relative positioning of your header’s components will be preserved.

In other words if you want a sticky header to not be attached to the top of the screen, you will have to insert an invisible box between them and add it to the header group.

Updated for Sparkle 3.1

Auf Deutsch

En Français

In Italiano

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

Sparkle combines an all-in-one approach, an understandable interface and a focus on producing high performance and search engine optimized websites. 

All in a powerful native Mac app. 

Nothing else comes close.

Copyright ©2021 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.