Design System is here - Read the release post

Learn GeneratePress

GeneratePress

Sticky Navigation

A sticky navigation stays at the top of the screen as visitors scroll, so the menu is always in reach.

Requires GP Premium — Menu Plus module. The whole guide is a GP Premium feature; the menu item height control also needs the Spacing module.

Appearance → Customize → Layout → Sticky Navigation

Sticky Navigation settings with Sticky Navigation turned on

Set Sticky Navigation to Mobile only, Desktop only or On to make the primary navigation stick to the top of the screen. Once it’s on:

  • Transition — Fade (default) or Slide in as you scroll, or None to simply stick.
  • Hide when scrolling down — hide it while scrolling down; it returns when scrolling up. Saves space, especially on phones.
  • Sticky Navigation Logo — a logo shown only in the sticky navigation.
  • Menu Item Height (Spacing module) — a different height while sticky. Empty by default, so it uses the Primary Navigation height. With navigation as header, a lower value makes the header shrink as you scroll.

For the phone-only header bar, see Mobile header. To show the navigation only once it’s sticky, see the recipe.

Recipes & customizations

Recipes add code as explained in Adding Custom Code.

Show the sticky navigation only

To hide the normal navigation and show it only once it becomes sticky:

#site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#sticky-placeholder {
    display: none !important;
}

All options

SettingSectionChoicesDefaultRequiresCustomizer option
Sticky NavigationSticky NavigationMobile only · Desktop only · On · OffOffGP Premium — Menu Plusgenerate_menu_plus_settings[sticky_menu]
TransitionSticky NavigationFade · Slide · None (shown when sticky is on)FadeGP Premium — Menu Plusgenerate_menu_plus_settings[sticky_menu_effect]
Hide when scrolling downSticky NavigationOn / Off (shown when sticky is on)OffGP Premium — Menu Plusgenerate_menu_plus_settings[auto_hide_sticky]
Sticky Navigation LogoSticky NavigationImage (shown when sticky is on)—GP Premium — Menu Plusgenerate_menu_plus_settings[sticky_navigation_logo]
Menu Item HeightSticky Navigation20–150 px (shown when sticky is on)Inherits Primary NavigationGP Premium — Menu Plus, Spacinggenerate_spacing_settings[sticky_menu_item_height]

Settings can be changed in code with the option_generate_menu_plus_settings filter.