Select Page

Make Any WordPress Block Sticky Without Plugins

position: sticky vs position: fixed

In CSS, you can use both position: sticky and position: fixed to make any WordPress block sticky, but there are some important differences that should be noted.

position: sticky keeps that element within the document flow. Great for things like columns and sidebars that have content above them. When the user scrolls to a certain position, the element will become sticky or return to the normal document flow, based on user input.

position: fixed removes the element from the normal document flow, FIXING it to a specific position (top, bottom, left right). It’s position remains fixed, regardless of user input.

For more info on how position works, check out this MDN article on CSS Position.

Target Your Element

Making elements sticky has a variety of useful applications such as sidebars, and calls to action, but in my case I want to make the main header element of my page (a navigation menu) stick to the top of the page as the user scrolls.

Since the main navigation menu will remain at the top of the page at all times, I’m going to use position: sticky because I want it to remain in the normal document flow. If I were to use position: fixed, yes, the menu would stick to the top of the page, but the rest of my webpage will float up underneath my menu, and you won’t be able to see it.

If you’re targeting a specific block, you may want to give it a class or ID and target that way, but in my case, I’m fine just grabbing the entire <header> element:

header {
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0 auto;
}

Possible Reasons position: sticky Isn’t Working:

1.) Check if a threshold has been specified

position: sticky requires a threshold to be specified. Make sure that you’ve set something other than auto for any of the following properties:

  • top
  • right
  • bottom
  • left

2.) Check your vendor prefixes

If you’re on Safari, you may need to add a webkit prefix to your position: sticky call:

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

3.) Check for overflow rules

If you have the overflow property set on any parent or ancestor of the sticky element, the position: sticky rule won’t work.

However, if you specify a height on the overflowing container, then sticky will work.

Check out more articles

How to Generate a Ranger Config File

ranger --copy-config=all This will copy all the default config files from /usr/local/lib so you can make edits without messing anything up. Huge shout out to https://dquinton.github.io/debian-install/config/ranger.html for explaining this and so much more. Took me a...

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Adjust Trackpad Sensitivity XFCE

xinput set-prop "Elan Touchpad" "Synaptics Finger" 1 1 1 What are the values 1 1 1? This sets the sensitivity as close to the original ChromeOS as possible. Larger numbers will decrease sensitivity of various aspects. I never looked into which individual value...

Fireworks (Short Film)

https://vimeo.com/395077249 About the film Year: 2020 Director/DP: Tim Searfoss Writers: Matt Jones, Tim Searfoss Sound Mix: Matt Jones

Hosting Multiple Sites Using LocalWP

I've done a write-up on hosting local WordPress sites before, but I definitely prefer this method over the previous one. If you've never tried hosting multiple sites using LocalWP, then I'd encourage you to check it out. I've had really bad issues with it in the past,...

Looking for a place to host your next project or design?

Use this link to get your first 4 months of WP Engine for free: WP Engine – Plans (With 4 months free)