Keep the header visible while scrolling without covering menus or other important controls.
This is a custom CSS example for Nordic in the editor with Content, Style and Addons. Theme editing is available in Go, Plus and Pro. The example is not a universal setting for every theme or TPL. Check the shop, active theme and version before making changes.
Prepare the change
Open Store design → Themes and identify the active theme.
Preferably work in a copy and retain the existing custom CSS so that your change can be reverted.
If the theme is not Nordic, do not use the selector below. First identify the header element in that theme and check its existing behaviour.
Add the Nordic CSS
Open the theme’s Style → Custom CSS. Add this example without replacing other custom CSS:
.nordic--header {
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
top: 0;
z-index: 1000;
}position: sticky keeps the header at top: 0 within its scrolling container. A different top value may be needed if a fixed bar is above it. Behaviour depends on the page layout; an ancestor container’s height and overflow can affect the result.
z-index: 1000 is an example rather than a guarantee that the header is above everything else. It can also cause it to cover dialogs, search results or consent controls. Do not blindly raise the value to resolve an overlap.
Save and check the complete page behaviour
Save and open the correct theme preview.
Scroll on mobile and desktop. Check that the header does not cover the first heading or an anchor-link destination.
Open the menu, search, basket and dialogs. Important buttons must remain accessible.
Also check product and checkout pages, where the header may behave differently.
If the result is wrong, remove only the added CSS block and check that the previous behaviour returns.
Quick start
Confirm Nordic and the correct shop.
Add the CSS in a working copy.
Check scrolling, the mobile menu and overlaps.
Use the change after the checks pass.
The CSS example requires custom CSS access and applies to Nordic. Go, Plus and Pro provide theme editing, but the same selector must not be assumed to work in other themes.
