Sticky Header Menu on Scroll

Scroll-Up Distance Threshold When Hide on Scroll Down and Show on Scroll Up are both active, this setting controls how many pixels upward the user must scroll before the header reappears. The default is 0 px, which means the header reappears instantly on any upward movement. Increasing this value (up to 300 px) prevents the header from flickering back into view when the user makes small, accidental upward movements at the bottom of a page.

Shrink on Scroll (Compact Mode) When enabled, the sticky header automatically reduces its top and bottom padding as soon as it becomes sticky, giving it a slimmer, more modern look. A configurable Sticky Padding slider (0–50 px, default 8 px) lets you set exactly how much vertical padding the header should have while it is sticky. The transition between normal and compact size is animated using the same speed setting as other transitions. This is one of the most popular patterns in modern web design and requires no custom CSS.

Push-Up Element Specify a CSS selector for an element (such as a footer or an in-page banner) that will push the sticky header out of view as it scrolls into the header’s position. This prevents the sticky header from overlapping important content near the bottom of the page. The push-up movement is calculated in real time based on the element’s position relative to the header.

Enter Animations Choose an animation that plays once when the header first becomes sticky: – None: The header sticks instantly with no animation. – Fade In: The header fades in from transparent to fully visible. – Slide Down: The header slides in from above the viewport, which provides the most polished and natural feel for most sites.

Animation Speed When an animation is selected, you can set the exact duration in milliseconds (from 0 to 1000 ms) to match the pace and personality of your site.

Drop Shadow Adds a soft box-shadow beneath the sticky header to visually separate it from the page content below. The shadow color and opacity are both configurable so you can match your design exactly. The shadow transitions in smoothly as the header sticks.

Custom Sticky Background Color, Opacity, and Glassmorphism If your header uses a transparent background when it is in its normal position, enabling this option lets you set a background color that is applied only when the header is sticky. A Background Opacity slider (0–100%) allows you to make the background semi-transparent rather than fully solid. A Backdrop Blur slider (0–20 px) adds a CSS backdrop-filter: blur() effect behind the header, creating the popular frosted-glass (glassmorphism) look. Combine a white background at around 85% opacity with 8–12 px of blur for a clean, modern glass-effect sticky header — no custom CSS required.

Responsive Breakpoint Control Two independent width controls let you disable the sticky behavior at specific screen sizes: – Disable Below Width: Enter a pixel value and the sticky header will not activate on screens narrower than that width. Set to 0 to enable on all screen sizes. Useful if your mobile header uses a different layout or a hamburger menu that should not be sticky. – Disable Above Width: Enter a pixel value and the sticky header will not activate on screens wider than that value. Set to 0 to enable on all screen sizes.

Configurable Z-Index Set the CSS z-index value for the sticky header directly from the settings page. The default is 1000, which works for most themes. If another plugin or theme element appears on top of your sticky header, increase this value until the header sits on top.

CSS State Classes When enabled, the plugin adds the class mshms-is-sticky to the header element whenever it is in its sticky state, and mshms-not-sticky when it is not. These classes make it easy for developers and theme customizers to write CSS that targets each state independently, for example to change the logo size, font color, or padding when the header is sticky.

Display On (Page Type Control) Choose exactly which types of pages the sticky header should be active on. The available options are: – Home Page – Blog / Posts Page – Posts (single post pages) – Pages (single page entries) – Archives (category, tag, date, and author archives) – Search Results – 404 Page – Attachments – Any public custom post types registered on your site

Debug Mode Displays a small overlay on the frontend of your site showing the currently detected header element and its CSS selector path, and logs detailed messages to the browser console. Use this mode when setting up the plugin or troubleshooting detection issues. Turn it off before going live.

Reset to Defaults A Reset to Defaults button on the settings page restores every option to its original out-of-the-box value in a single click. A confirmation prompt prevents accidental resets. This is useful when experimenting with settings and wanting to start fresh without manually adjusting each option.

No Coding Required All settings are controlled from the WordPress admin panel under Settings – Sticky Header Menu. There is no need to edit any theme files, add custom code snippets, or write PHP. The plugin loads its scripts only on pages where the sticky header is enabled and only when the plugin itself is active.

Cache Compatibility When you save settings the plugin automatically clears caches for the most popular WordPress caching solutions, including WP Rocket, LiteSpeed Cache, WP Super Cache, W3 Total Cache, WP Fastest Cache, Cache Enabler, Hummingbird, SiteGround Optimizer, Breeze, and FlyingPress.