A sticky header earns its keep by keeping the menu and cart one tap away as a shopper scrolls a long menu. The two things that go wrong are height and layout shift: cap it near 60px on mobile, and never let it resize on scroll in a way that pushes content around.
What a sticky header is actually for
On a dispensary site the payoff is narrow but real. A visitor scrolling a long strain menu should never have to thumb back to the top to reach the cart or switch categories. Keeping the nav and cart pinned removes that trip. Everything else people bolt onto a sticky header, promos, banners, secondary links, is where it starts costing more than it returns.
The height budget on mobile
Screen space on a phone is the whole constraint. A sticky bar at 56 to 60px leaves the product grid room to breathe. Push past 70px and you are permanently covering a row of prices and photos, on every screen, for every visitor. Fit three things in that bar: the logo, a menu toggle, and the cart. The full nav lives in the drawer behind the toggle.
The layout-shift trap
The costliest mistake is a header that changes height as you scroll. A design shrinks a 90px header into a 60px bar after a bit of scrolling, and if the page content is not accounting for that change, the whole body jumps up 30px mid-scroll. That jump is cumulative layout shift, one of Google's Core Web Vitals, and it reads as janky to a human too. Pick one fixed height and hold it, or if you must shrink, animate it with a CSS transform so the document flow never moves.
The anchor-link snag
Here is one almost everyone ships broken. Because the sticky header sits over the top of the page, clicking an in-page link, say a jump to your FAQ, scrolls the target right under the bar where you cannot read it. The fix is one line: set scroll-margin-top on your headings equal to the header height. Now anchored sections land in view instead of hiding behind the header.
Worked example: a menu that resized
A client had a 96px header that collapsed to 64px on scroll. On mobile, the moment it collapsed, the product grid lurched upward and people mis-tapped the wrong strain. We dropped it to a single 60px height with no resize, moved the tagline into the drawer, and added scroll-margin-top to the category anchors. CLS on the menu page went from visibly bad to clean, and the mis-taps stopped. No feature was lost, only the resize.
When to skip it
Not every page needs one. On a short landing page that fits in a screen or two, a sticky header just steals space for no gain. Reserve it for long, scroll-heavy pages, menus, category listings, long guides, where the trip back to the top is a real cost worth removing.
Key takeaways
- The job is narrow: keep the menu and cart reachable on long, scrolling pages.
- Cap the bar near 56 to 60px on mobile so it does not cover product rows.
- A header that resizes on scroll causes layout shift; hold one height or animate with transform.
- Set scroll-margin-top on headings so anchor jumps do not land behind the bar.
Frequently asked questions
How tall should a sticky header be on mobile?
Keep it around 56 to 60px on a phone. A short viewport does not have room to give up, and a sticky bar over 70px starts eating the product images and prices people came to see. Fit the logo, a menu toggle, and a cart icon into that height and leave the rest in the drawer.
Can a sticky header hurt Core Web Vitals?
It can hurt CLS if the header changes height as the page scrolls. A common pattern shrinks a tall header into a compact bar after a few hundred pixels, and if the content below is not reserved for that change, everything jumps. Either keep one fixed height or animate the shrink with transform so layout does not move.
Should the header cover an anchor link target?
No, and this is easy to miss. When a sticky header overlaps the top of the page, jumping to an in-page anchor lands the target underneath the bar. Add scroll-margin-top equal to the header height on your headings so anchored sections and FAQ jumps land in view instead of behind the header.
Want this done for your brand?
We build cannabis & CBD search visibility with full transparency, for dispensaries, brands, and MSOs.
Get a free cannabis SEO audit ›