help center

On this page

Create a sticky header

Last Update: March 11, 2024

WordPress Sticky headers make your header or menu visible at all times.

To create a sticky header:

  1. Login to WP Admin.
  2. Edit the header by clicking its handle Create a sticky header 4. The Edit Container panel shows on the left.
    Create a sticky header 1
  3. Click Advanced
  4. Expand Motion Effects.
  5. Set Sticky. Choose one of the following options:
    Create a sticky header 2
    • None – This removes the sticky header. Do not choose if you want to create a sticky header.
    • Top – Choose to stick your header to the top of the screen.
    • Bottom – Do not choose. Not relevant for headers.
  6. Under Sticky On, choose the devices on which your section should be sticky. Choose one of the following options: 
    Create a sticky header 3
    • Desktop – Sticky on desktop/laptops.
    • Tablet Portrait – Sticky on tablets.
    • Mobile Portrait – Sticky on mobiles.
  7. Set the following: (Displays only if Sticky is set to Top.)
    • Offset – It pushes the sticky element up or down by pixels.
    • Effects Offset – This is the number of pixels the user must scroll before the sticky effect begins.
    • Stay in Column – Toggle to Yes if you want the section to remain in its own column.
  8. Click Publish.
Note
For sections, you have to deactivate The stretch section feature to be able to use the Scrolling Effect, otherwise the Scrolling Effect tab does not appear.

How to Create A Header & Footer in WordPress + Examples

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article