[Support request] Sticky Sidebar Like Forbes

[Sunil]

Dear Team

Is there a way to develop a sticky sidebar similar to Forbes? Their website makes a widget sticky till the middle of the content then another sticky widget takes over till the bottom. Is this possible on generatepress?

( https://www.forbes.com/sites/japan/2021/02/26/japan-using-digital-technology-to-enhance-longevity-in-society/ )

[David]

Hi there,

that would require custom development – the forbes site is using JS to calculate the height of the content, the relative placement of each sticky element, when it should be sticky and when it should be unstuck as the new element enters the screen.

At the most i can offer is a simple CSS method. This applies to the Right Sidebar of a default install of GP:

@media(min-width: 769px) {
  .inside-right-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .inside-right-sidebar aside {
    margin-bottom: auto !important;
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
  }
}

It will simply evenly space out each of the widgets in the sidebar. And makes them sticky.
What it cannot do is remove the sticky position from the preceding element, so as each widget scrolls to its sticky position it will sit in front of the previous sticky element, so each widget would need to be the same height ( or incrementally greater in height ) to stop the previous one from showing behind.

Removing the sticky would require some custom JS.

[Sunil]

Dear David

Thank you so much for this CSS. It solves 80% of my issue. However, the ads might have a viewability issue if not made un-sticky. Can you share a basic js code that I can edit according to my own website?

It’ll be great if you can.

(Does generatepress has a donate option? You guys solve almost all of my problems. It’s a blessing for me as a non-tech person)

[Sunil]

If you can’t help me with that, I see another generatepress website using a similar structure. Maybe you can guide me with how they use it. Attaching the link as well.

[David]

There may be a pure CSS method i can try if its only applied to the Feedo widgets as their markup is the same and they have no Widget Title… if you can remove the CSS i provided and the Sticky plugin as thats not required and just gonna cause some issues.

We do have a Donate option – Coffee is always appreciated 🙂

https://generatepress.com/ongoing-development/

That other site is actually using Genesis and that advert is a custom JS wrapper purely for the adverts – looks like is built upon the WP Quads Pro scripts – which has been re-incarnated in this plugin but i don’t see any sticky option:

https://en-gb.wordpress.org/plugins/quick-adsense-reloaded/

[Sunil]

Yes, It’s only for feedo

I’ve removed the CSS and the plugin for now. Thank you so much.

[David]

Lets give this a go – if it works ill be super amazed 🙂

@media(min-width: 769px) {
  .inside-right-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .inside-right-sidebar .feedo-widget {
    flex-grow: 1;
    overflow: unset;

  }

  .inside-right-sidebar .feedo-widget>div {
    position: sticky;
    position: -webkit-sticky;
    top: 60px;
  }
}

[Sunil]

It loves like a charm. You are a genius.

Just one correction needed. The ad hides the overlay video ad. Screenshot here

Can something be done about it?

https://imgur.com/a/JtTxe9d

[Sunil]

Found a solution for that as well.
Thanks team!
You guys are amazing!

[David]

Thats awesome! Glad to be of help 🙂

[Sunil]

Hey David

I found just one tiny problem with this. It’s the sidebars on smaller screens (like on my Chromebook). The ads and sidebars cover the content in such cases. How can we fix it?

Can we hide one sidebar? Or I can go away with both of them if that works.

https://imgur.com/R2hEjed

[Sunil]

Fixed it as well. Used this code –

@media (max-width: 1100px) {
   .site-content .content-area
	{
		width: 70%;
	}
	#right-sidebar {
	
 		width: 30%;
    }
	#left-sidebar {
        		display: none;

    }
}

[David]

The issue is there just isn’t room for those size adverts in the narrow sidebars.
You can use some CSS like this to remove the left sidebar on smaller screens and fix the width of the right sidebar:

@media (min-width: 769px) and (max-width: 1200px) {
  .both-sidebars #primary {
      width: calc(100% - 350px);
      left: 0;
  }
  .both-sidebars #right-sidebar {
    width: 350px;
  }
  .both-sidebars #left-sidebar {
    display: none;
  }
}

[Sunil]

Everything is sorted now. Thank you so much!

[David]

You’re welcome

[Author]

Posts