How to Add a Sticky Menu in WordPress (Without Elementor Pro)

A sticky menu keeps your navigation visible as visitors scroll, so they can move around your site without scrolling back up. You do not need Elementor Pro for it; here are three free methods. (Using Elementor Pro? See making a sticky header with Elementor.)

Method 1: Your theme's setting

Many themes include a sticky header option. Look in Appearance > Customize > Header for "Sticky header" or "Fixed header". Some themes offer it only in their premium add-on. Block themes may allow sticky positioning on the header group in the site editor.

Method 2: A free plugin

Search Plugins > Add New Plugin for "sticky menu". These plugins let you pick the element to stick (using its CSS selector), set the distance from the top and disable it on small screens. Choose a lightweight, recently updated option.

Method 3: A few lines of CSS

1. Find your header's CSS class: right-click the header, choose Inspect and note the class of the outer header element (for example .site-header).
2. Go to Appearance > Customize > Additional CSS (classic themes) or the site editor's custom CSS (block themes).
3. Add:

.site-header { position: sticky; top: 0; z-index: 999; background: #fff; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

Replace .site-header with your theme's class. The admin-bar lines stop the header hiding under the WordPress toolbar when you are logged in.

Fixing common problems

• Nothing happens: a parent element has overflow: hidden, or you targeted the inner menu instead of the outer header.
• Content shows through: add a solid background color.
• Dropdowns hidden behind content: raise the z-index.
• Too tall on phones: wrap the rule in a desktop-only media query.

Want a floating button instead of a whole menu? See adding a sticky Book Now button.