How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working
Tags: html, css, wordpress, javascript
Published: 2021-03-06 22:15:36

---
title: How to Unset CSS Overflow Using JavaScript when Sticky Elements Stop Working
published: true
description: This is a tutorial for showing how to fix sticky HTML elements (on a WordPress site) that stop working because of a parent div's overflow property.
tags: HTML,CSS,WordPress,JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpvr040mjvyyi4blem5l.png
---

If your sticky sidebar, header, or footer CTAs stopped working, there's a good chance that your theme added the [CSS overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) to a parent element (usually a div).

Does this sound familiar? Then, keep reading ;-)

In this tutorial, we'll use JavaScript to unset that _bad boy_. 

The steps below use WordPress as an example. But, the same concept applies to other website platforms or frameworks.

## Step 1: Find the Offending Element

Open your dev tools and type in `overflow` in the search filter for the CSS panel.

![Finding the overflow property using the browser inspector tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyync81bdg631slm7g7c.png)

Make a note of the HTML ID attribute of the element that has the `overflow` property set.

In this case, it's `boxed-wrapper`.

## Step 2: Write the JavaScript to Unset the Overflow Property

Open your favourite code editor. Copy and paste the code below into your editor and save it using the `.js` file extension.

```javascript
(function () {
	if (!document.URL.includes("floating-toc-sidebar-test")) return;
	let element = document.getElementById("boxed-wrapper");
	if (!element) return;
	element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
})();        
```

Change `floating-toc-sidebar-test` to your page slug. This is because we want this code to run only on the page that needs fixing.

Change `boxed-wrapper` to the HTML ID you noted in **Step 1**. Note: If the offending HTML element didn't have an ID, you'll need to come up with a CSS selector that grabs that one element only.

Save your file again.

## Step 3: Install the JavaScript Code

There are 2 options.

### Option 1: Installing Without a Plugin

Open your favourite code editor again. Copy and paste the code below and save it using the `.php` file extension.

```php
/* Inline script printed out in the footer to fix sticky elements. */
function sticky_fix_add_script_wp_footer() {
    ?>
        <script>
			(function () {
				if (!document.URL.includes("floating-toc-sidebar-test")) return;
  				let element = document.getElementById("boxed-wrapper");
  				if (!element) return;
  				element.style.overflow = 'unset'; /* To fix any position: sticky further down the DOM. */
			})();        
		</script>
    <?php
}
add_action('wp_footer', 'sticky_fix_add_script_wp_footer');
```

Replace the function between the `<script></script>` tags with the function  you wrote in **Step 2**.

Save your PHP file.

Copy and paste the contents of your PHP file into your child theme's `functions.php` file.

### Option 2: Installing Using the Insert Headers and Footer Plugin

Log into your WordPress admin area. Head over to **Settings** > **Insert Headers and Footers**.

In the **Scripts in Footer** code snippet box at the bottom, type in the following code.

```html
<script>
</script>
```

Then, copy/paste the JavaScript code that you wrote in **Step 2** between the `<script></script>` tags.

Here's what you should have so far.

![Adding JavaScript to the footer using a plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6h5m1ktjhiecj9adwg4.png)

Hit **Save**.

And, you're **done** and _done_!

Give your page a test. 

Remember to share your knowledge with others who run into the same problem.

Enjoy!