Join the waitlist

Make a sticky header in WordPress

Your header stays pinned to the top as the page scrolls. Over the first 120px it can turn from solid to frosted glass and pick up a soft shadow.

Get Grinner free
See it live

Type

An upgrade to the Group block

Find it

Header’s top-level Group, Sticky header

Phones

Scrolls away below 600px unless switched on

Speed

The glass is off on small phones unless you want it

Live demo

Solid at the top, glass on the way down.

These are screenshots of the real feature, taken from a test page.

Sticky header example, the same page at the same point with Sticky header on, the header pinned at the top as frosted glass with a soft shadow over the boats
Sticky header example, a test page scrolled part way down with Sticky header off, so the header has scrolled away and the harbor picture fills the top of the screen

Settings    Screenshots of Glass on scroll and Shadow on scroll

What you can change

The settings worth knowing.

Glass, shadow and what happens on phones.

Harbor Café

Menu

Glass on scroll

Frosted glass

Turns the header to 72% opaque glass over the first 120px of scrolling.

Blur 4px

Blur 20px

Blur amount (px)

How frosted

From 0 to 24px, 12 by default.

Harbor Café

Menu

Glass colour

Tinted glass

Tint the glass with another palette color.

Harbor Café

Menu

Stays put on a phone

Below 600px

Sticky on mobile

Phones too

Keep it pinned below 600px, and add Glass on mobile if you want the blur there.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Open your header

In the Site Editor, select the header template part’s top-level Group.

3

Switch on Sticky header

Turn it on, add glass and shadow if you like, set the phone options, then save.

Good to know

Fair questions.

Sticky header is a Grinner upgrade to the Group block in your header. The header stays pinned to the top as the page scrolls, and can turn from solid to frosted glass with a soft shadow. Use it so your menu is always within reach.

No hide-on-scroll, and no see-through mode over the hero.

No. The glass uses the theme’s base color instead.

This feature switches at 600px, so screens from 600 to 767px behave like desktop.

No glass or shadow fade, just a solid pinned bar.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All header and menus features

Smooth scroll

In-page links that glide to their section and stop clear of the header.

Navigation hover effects

Underlines, pills and fills on menu links, and a mark on the current page.

Site logo on phones

A separate logo size for phones.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version