FAIR

Federated and Independent Repositories

Fixed And Sticky Header

Plugin Banner

Fixed And Sticky Header

by Arjun Thakur

Download
Description

Keep your website header visible while visitors scroll.

Fixed And Sticky Header lets you make your existing WordPress website header fixed and sticky without replacing your theme’s header.

Choose the header you want to make sticky, set when it should become fixed while scrolling, and adjust its appearance to match your website.

The plugin is simple to configure and works with your existing WordPress theme.

Key Features

  • Fixed and sticky header – Keep your header visible as visitors scroll.
  • Choose your header – Select the header element you want to make fixed or sticky.
  • Scroll control – Choose how far visitors scroll before the header becomes fixed.
  • Background and text colors – Set the colors of your sticky header.
  • Header height and spacing – Adjust the height and padding around your header.

Finding Your Header

The plugin needs to know which part of your website should become fixed.

Your theme may use a selector such as:

  • .site-header
  • #masthead
  • .main-header

If you are unsure which selector to use, inspect your website’s header using your browser’s developer tools and identify the main header container.

Tip: Select the main header or header container rather than only the logo, menu, or an individual element inside the header.

The exact selector depends on your WordPress theme.

  1. Install and activate the Fixed And Sticky Header plugin.
  2. Go to Settings -> Fixed And Sticky Header.
  3. Enter the CSS selector for the header you want to make fixed or sticky.
  4. Set the scroll distance and customize the header appearance.
  5. Click Save Changes.
  6. Visit your website and scroll to check the sticky header.
How do I make my header sticky?

Go to Settings -> Fixed And Sticky Header, enter your header’s CSS selector, choose the scroll position, and save your settings.

Why isn’t my header becoming sticky?

First, check that the header selector is correct. Make sure you have selected the main header or header container rather than an individual element such as the logo or menu.

If the changes are not immediately visible, clear your site’s cache and browser cache.

Why did my logo or menu position change?

The plugin applies the fixed/sticky behavior to the header element you select. If the selected element is too broad or is not the correct header container, it can affect the layout of elements inside it.

Try selecting the main header container used by your theme.

Can I change the sticky header’s background and text colors?

Yes. You can change the background color and text color from the plugin settings.

Can I change the header height and spacing?

Yes. The plugin provides settings for header height and padding.

Can I use the plugin with my existing theme?

Yes. The plugin works with your existing theme’s header. You select the header element you want the plugin to make fixed or sticky.

Can I choose when the header becomes fixed?

Yes. You can set the scroll distance at which the header becomes fixed.

Does the plugin replace my website header?

No. The plugin applies fixed/sticky behavior to the existing header element selected in the settings.

Will my settings be preserved when I update the plugin?

Yes. Version 1.5.2 preserves your existing plugin settings when upgrading from an earlier version.

Does the plugin work on mobile devices?

The plugin applies the fixed/sticky behavior according to your settings. The current version does not provide a separate option to disable the sticky header on mobile devices.

Work better than expected! WP Version 6.3.1

By regikono on September 12, 2023

After installation, navigate to SETTINGS in the left-hand side menu, where you will find this plugin. Assign it a name, for instance, .head (with a dot), and save it. Next, go to your header or menu, edit it, and in the right-hand menu under the 'block' tab, look for CSS. After the existing name (if there is one), add a space and type 'head' (but this time without the dot). Naturally, you can use any name you prefer instead of 'head'. It works wonderfully. Thank you, Arjun!

Simple

By ok369ok on June 13, 2023

Easy and simple. Does what it is meant to do.

Clunky

By foxintheforestau on March 5, 2021

I couldn't get the plugin to scroll smoothly, it always jumped down the page despite trying a range of settings. Uninstall...

Add Fixed Header (Class or Id)

By higrades on January 17, 2021

I need to know what Fixed Header (Class or Id) i have to mention. My Website is higrades.pk

Worked 😉

By batson1150 on June 15, 2018

it worked for me. thank you

Not working

By volkerh on January 5, 2018

Easy to setup and configure, but doesn't fix at top.

Not position fixed

By borayeris on December 8, 2017

Not position fixed

1.5.3

  • Refreshed the plugin icon and banner for improved visibility and presentation.
  • Minor design and documentation improvements.

1.5.2

  • Improved settings input validation and nonce handling.
  • Corrected the plugin text domain and translated output handling.
  • Removed the externally hosted jQuery script and use WordPress’s bundled jQuery instead.
  • Fixed non-prefixed global function and variable names.
  • Updated the minimum supported WordPress version to 4.1 to match the WordPress APIs used by the plugin.
  • Limited plugin directory tags to five relevant search terms.

1.5.1

  • Security and compatibility patch.
  • Sanitized and validated plugin settings before saving.
  • Escaped settings output and safely encoded JavaScript configuration.
  • Preserved existing settings during deactivation, reactivation, and upgrades.
  • Prevented activation from overwriting existing plugin configuration.
  • Removed an unintended forced text alignment that could move header logos.
  • Added validation for CSS selectors, CSS values, and colors.
  • Replaced the JavaScript-based admin redirect with a WordPress-safe redirect.
  • Updated WordPress and PHP compatibility metadata.

1.5

  • Previous release.
Back to top