Sticky Menu & Sticky Header


The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages «sticky» as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu.

You just need to know how to pick the right selector for the element you want to make sticky, and you need to be sure it’s a unique selector. Sometimes a simple selector like «nav», «#main-menu», «.menu-main-menu-1» is enough. Other times you will have to be more detailed and use a more specific selector such as «header > ul:first-child» or « .menu-header ul.main». If you don’t like messing with any code check out out the visual element picker in WP Sticky PRO.


  • Any element can stick: although common use is for navigation menus, or header the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for sticky widget, sticky sidebar, sticky header, sticky menu, sticky header, sticky call-to-action box, sticky banner ad, etc. Need to make multiple elements sticky? Check out WP Sticky PRO.
  • Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the «ceiling» of the page.
  • Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your element to be sticky on smaller screens, for example.
  • Enable only on some pages: sometimes you don’t want the element to be sticky on the entire site. WP Sticky PRO gives you the option to pick posts, pages, categories, tags and CPTs where you don’t want the element to be sticky.
  • Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
  • Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
  • Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
  • Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
  • Dynamic Mode: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
  • Debug Mode: find out possible reasons why your element doesn’t stick by switching on Debug Mode, and error messages will appear in your browser’s console.

Having problems with SSL? Moving a site from HTTP to HTTPS? Install our free WP Force SSL plugin. It’s a great way to fix all SSL problems.

GDPR compatibility

We are not lawyers. Please do not take any of the following as legal advice.
Sticky does not track, collect or process any user data on the front end or in the admin. Nothing is logged or pushed to any 3rd parties. We also don’t use any 3rd party services or CDNs. Based on that, we feel it’s GDPR compatible, but again, please, don’t take this as legal advice.


  • Basic Sticky Menu Settings screen
  • Advanced Sticky Menu Settings screen


  1. Upload the «sticky-menu-or-anything» directory to your «wp-content/plugins» directory.
  2. In your WordPress admin, go to PLUGINS and activate «Sticky Menu (or Anything!)»
  4. Pick the element you want to make sticky
  5. Party!


Can I make multiple elements sticky?

Sure, WP Sticky PRO has that option. You can make as many elements sticky as you like and configure settings individually for each element.

I selected a class/ID in the settings screen, but the element doesn’t stick when I scroll down. Why not?

First, make sure that if you select the element by its class name, it is preceded by a dot (e.g. «.main-menu»), and if you select it by its ID, that it’s preceded by a pound/hash/number sign (e.g. «#main-menu»). Also, make sure there is only ONE element on the page with the selector you’re using. If there is none, or more than one element that matches your selector, nothing will happen.

Once the element becomes sticky, it’s not positioned/sized properly at all.

Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:

  • negative margins
  • absolute positioning
  • top/left/bottom/right properties
  • «display: inline»
  • «!important» applied to any of its properties

Try to avoid all this where possible, but if you can’t, using the plugin in Legacy Mode (see below) helps sometimes.
Another situation that can cause trouble, is when any parent of your sticky element has the «transform» CSS property applied to it.

Once the element becomes sticky, it’s not responsive and doesn’t resize when I change the browser size.

This is a known (and annoying) bug in the plugin that I haven’t been able to solve properly yet. For some sites (when the element does not contain any JavaScript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below).

Is it possible to add some styles to the element but only when it’s sticky?

To add styles to your sticky element when it’s not sticky, use class name «.element-is-not-sticky».
To add styles to your sticky element only when it’s sticky, use class name «.element-is-sticky»

The following code would give your element a red background only when it’s not sticky, and blue only when it is:

.element-is-not-sticky {
background: red;

.element-is-sticky {
background: blue;

Once the element becomes sticky, there’s a brief moment where you see it twice.

If you’re using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.

My menu sticks, but it doesn’t open on the Responsive theme when it’s sticky.

This was a bug in pre-2.0 versions, and an incompatibility with the theme. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need to enable Legacy Mode for some reason, it would be better to turn off stickiness for the mobile menu (set «Do not stick element when screen smaller than:» to 651 pixels).

I have another plugin called Easy Smooth Scroll Links, but once my menu becomes sticky, that one doesn’t work anymore.

This was a bug in pre-2.0 versions, and an incompatibility with the plugin. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need Legacy Mode enabled for some reason, there is no fix for this bug, however there is an alternative workaround. According to reports from users who had this issue, a plugin called Page Scroll To ID is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin in Legacy Mode.

Still doesn’t work. What could be wrong?

Check the «Debug Mode» checkbox in the plugin’s settings. Reload the page and you may see errors in your browser’s console window. If you’ve used a selector that doesn’t exist, OR there are more of them on the page, you will be notified of that in the console.

Is it possible to have multiple sticky elements?

La versión actual sólo permite un elemento pegajoso, pero esta funcionalidad se implementará en la próxima versión principal. Sin fecha prevista de lanzamiento de momento.

What is Legacy Mode? Should I use it?

En la versión 2.0 del plugin, se introdujo un nuevo/mejor método para crear elementos pegajosos. Antes de esto, un elemento pegajoso sería esencialmente una copia clonada del elemento original. Ahora, el elemento en sí mismo se vuelve pegajoso y no utiliza más el copiar y clonar, lo que resuelve una gran cantidad de problemas.

Por lo tanto, ¿debes usarlo o no? Bueno, si actualizaste este plugin de una versión anterior, el modo heredado se activará de forma predeterminada, porque lo más probable es que el método antiguo funcionara perfectamente para tu sitio. Si ese es el caso, no hay realmente necesidad de utilizar el nuevo método y puedes seguir utilizando el viejo método clásico. Si no está roto, no lo arreglas, ¿cierto?

Dicho esto, vale la pena comprobar si tu elemento funciona igual de bien con el modo heredado desactivado, ya que este es el «mejor» método. Sólo probarlo rápidamente. Si no funciona, siempre puedes volver atrás y activarlo de nuevo.

NOTA: las nuevas instalaciones del plugin tendrán el modo heredado desactivado de forma predeterminada. Sólo ACTUALIZACIONES de la 1.4 (o anteriores) deberían tenerlo activado de forma predeterminada.

What is this Dynamic Mode thing exactly?

Este modo sólo está disponible en el modo heredado, y para explicarlo correctamente, hay que ir un poco más allá en la funcionalidad del plugin. Así que ten paciencia conmigo…

In Legacy Mode, when an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it’s actually not the element itself you see, but a cloned copy of it, while the actual original element is out of view and invisible.

The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.

En la versión original del plugin, el clon se crearía justo en el momento en que cargas la página (pero no es visible de inmediato). Entonces cuando haces scroll hacia abajo, él se haría visible (y se pegaba arriba), mientras que el elemento original desaparecería de la vista.

However, some themes use JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn’t exist in the HTML source code when you load the page, but is created some time after the page is fully loaded — in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element (that you want to make sticky) may not have been fully created upon page load, so the clone would also not be fully functional.

Enter Dynamic Mode. Now, a clone of the element is not created on page load — instead, it’s only created when the user scrolls and hits the «sticky» point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point in time (and not at the «page is loaded» point, which may be different if the element was altered since).

¿Por qué no uso el Modo Dinámico todo el tiempo entonces? Esto tiene que ver con el hecho de que otros plugins se inicializan en la carga de la página y pueden necesitar el marcado completo (incluido el elemento clonado) en ese punto. En el Modo Dinámico, todavía no hay ningún clon disponible en la carga de página, por lo que podría causar un problema si ese otro plugin está buscando un elemento que aún no existe.

(Esto puede sonar terriblemente confuso y ¡así es! Por lo tanto, tuve mucho trabajo para solucionar este problema: desde la versión 2.0 del plugin, se utiliza un método totalmente diferente para hacer los elementos pegajosos, y el Modo Dinámico no es ya un problema.)


I need more help please!

Please go to the plugin’s support forum on and post a message (include a link to your site if possible).

How can I report security bugs?

You can report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team help validate, triage and handle any security vulnerabilities. Report a security vulnerability.


11 de mayo de 2024
I had this trouble: «Once the element becomes sticky, it’s not responsive and doesn’t resize when I change the browser size.» However, the plugin legacy mode resolved it for me. Thank you
Leer todas las 699 reseñas

Colaboradores y desarrolladores

«Sticky Menu & Sticky Header» es un software de código abierto. Las siguientes personas han colaborado con este plugin.


Traduce «Sticky Menu & Sticky Header» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios


  • 2022-11-20
  • minor security fixes


  • 2021-02-19
  • fixed one really really visible typo
  • added custom footer text on plugin’s admin page
  • lowered the price for the team package


  • 2021-02-13
  • better clean-up on delete and deactivate


  • 2021-01-30
  • added flyout menu
  • added monthly price


  • 2021-01-05
  • minor bug fixes and improvements
  • removed promo campaign for WP 301 Redirects


  • 2020-10-16
  • PRO version is here
  • bug fixes and improvements


  • 2020-10-01
  • more CSS fixes
  • added promo campaign for WP 301 Redirects


  • 2020-09-08
  • improvement for themes with !important rule at margin top and left within sticky element


  • 2020-06-19
  • security fix – thanks to Antony from Sucuri


  • 2020-02-01
  • bug fixes
  • minor GUI improvements
  • 100,000 users hit on 2020-01-31


  • Fixed minification bug


  • Sticky element has specific classes to target sticky/non-sticky state: «.element-is-sticky» and «.element-is-not-sticky»


  • fixed padding calculation bug (percentages are off when sticky)
  • fixed bug where assigned styles loop caused JS error


  • Introduced a new/better method for making elements sticky
  • Added Legacy Mode (for those who want to continue the old method)
  • Split up settings screen in Basic and Advanced
  • Debug mode uses uncompressed JS file for easier remote debugging


  • Removed error notification if no pushup-element is selected
  • Renaming class «cloned» to «sticky-element-cloned» and «original» to «sticky-element-original» to avoid conflicts with Owl Carousel
  • Fixed bug where cloned element width would be rounded down if it contained sub-pixels


  • Minor bug fix for push-up element


  • Added functionality to move sticky element down in case there is an Administrator Toolbar at the top of the page
  • Added functionality to push sticky element up by another element lower down the page


  • Fixed small bug related to version number


  • Bug with Dynamic Mode select box/label fixed
  • Bug with Z-index fixed (thanks @aguseo for reporting)
  • All text in plugin fully translatable
  • Added FAQ tab to settings screen
  • Added infobox to settings screen
  • Added a few comments to source code


  • Dynamic Mode added (addressing problems with dynamically created menus — see Frequently Asked Questions above for details)


  • Ready for WordPress 4.1 (and TwentyFifteen)
  • Fixes issue when element has padding in percentages


  • Fixes width calculation bug introduced in previous version (sorry about that), box sizing now supported


  • Fixes element width calculation bug


  • Fixes viewport calculation bug


  • Added functionality for optional minimum/maximum screen size


  • Initial release (using v1.1 of the standalone jQuery plugin)