Why Your AdSense Sticky Ad is not Working

Generally we make sticky sidebar to put our ads on them but sometimes it does not work as expected. Even you make your sidebar or last widget on sidebar sticky, when you put your AdSense code the sticky widget stops working. So here I am going to show you why this happens at first place and how you can avoid it.

First of all let’s know how sticky element are made and how it works. Sticky element can be created using CSS (Cascading Style Sheet) and JS (JavaScript) and you probably have tried CSS method using position: sticky. If you have used JS method you won’t have been reading this. We are talking about position: sticky and why AdSense isn’t working with it.

In simple words there are 2 main parts, sticky item and sticky container. Where sticky item is your widget or AdSense Ads and sticky container is parent of that sticky item. Sticky container provides area for sticky item to float when viewport position matches the position definition like top: 20px. It means when sticky item reaches top visible area with 20px gap between them, sticky element start to float in sticky container. So to make position: sticky to work you need to provide large area to the parent element.

You have to remember that all the elements/items in your page moves when you scroll including sticky container. What does not moves is sticky item so clearly it needs space to float otherwise it will also moves with sticky container.

Here is an image that can help you to imaging how position: sticky works. Blue container outside sticky widget is sticky container with height form header to footer where sticky widget can float. After sticky container has no more space then sticky widget also moves along with it.

To know more about how position: sticky works you can read this article in Medium.

Why sticky widget does not work after adding AdSense Ads

You probably are using responsive AdSense Ads that fits automatically with any screen size and orientation. Responsive ads adds some inline CSS that make position: sticky unusable. It adds height: auto !important to the parent of sticky widget where AdSense ads are placed.

This inline code will make sticky container to shrink to use only required height which is sum of height of widget 1 and 2 in below image. Hence sticky widget can not float and position: sticky simply doesn’t work.

Other reason for position: sticky not working is overflow set to hidden, scroll, or auto on any of the parents of the element. Also some browser doesn’t support position: sticky.

Solution for sticky AdSense Ads

There are 2 solution for fixing sticky AdSense ads; first is using fixed sized ads and second is using JavaScript. I prefer using fixed sized ads because I don’t want too much JS in my site.

Edit your responsive ad unit and make it fixed. You can have any ad size following AdSense guidelines but for sidebar, 336×280 is one of the highest performing ad that works both in mobile and desktop.

If even after making fixed size AdSense ad position: sticky doesn’t work make sure sticky container have enough height. You can use height: 100% in parent element to make it work;

If you are like “No, I want responsive AdSense ad and also should be sticky” then use JavaScript. There is no chance to make widget sticky because position: sticky doesn’t work with height: auto or any other fixed height, you already knew why.

But in some case it may just work. In WordPress If you make entire sidebar sticky then it may work. Actually it worked with GeneratePress theme. But then disadvantage of making entire sidebar sticky is you have to scroll to the end of the page to view last widget in your sidebar if your sidebar does not fit within the screen.

There are plenty of WordPress plugin to make widget sticky and I recommend using Q2W3 Fixed Widget. It have both CSS and JS method so if CSS doesn’t work with your theme go for JS method.

Make last widget sticky in GeneratePress theme

@media (min-width: 769px) {
    .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .inside-right-sidebar aside:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 20px; /* Adjust to suit position */
    }
}

You may encounter a problem where the widget overflows footer. In this case try applying some margin-bottom to the .inside-right-sidebar aside:last-child CSS.

Make entire sidebar sticky in GeneratePress theme

@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 20; /* Adjust to suit position */
    }
}

Replace #right-sidebar with #left-sidebar if you want to make left sidebar sticky in GeneratePress theme.

Make last widget sticky in Genesis theme

This below code is for Genesis Sample theme but also works with Magazine Pro theme. You may need to do little customization if it doesn’t work with your Genesis child theme.

@media only screen and (min-width: 1024px) {
    .content-sidebar-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .sidebar-primary .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 40px;
    }
    .admin-bar .sidebar-primary .widget:last-child {
        top: 72px;
    }
}

Tools used: Sketchpad – https://sketch.io/sketchpad/