Sidebars Sticky - Left and Right

Hi there,

can you disable your cache plugin and remove any CSS you have added to make those elements sticky and i will take a look. However i am not sure it is possible.

I have used the following code from one of your forum posts to make right- sidebar sticky.

#right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

I have cleared all cache.
But I'm unable to make the left-sidebar sticky.
This is the forum post I'm talking.
https://generatepress.com/forums/topic/sticky-sidebar-2/

Try this CSS:

@media(min-width: 1024px) {
    .both-sidebars .site-content {
        display: flex;
    }
    .both-sidebars .site-content > div {
        left: unset !important;
    }
    
    #left-sidebar {
        order: -1;
    }
    
    .inside-left-sidebar, .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

Please disable your Cache plugin and disable any other respsonsive scripts related to sticky ads.

@David: Thanks, that worked perfectly. It saved me from another plugin. Great.

You're welcome

@David: The above code is working on both mobile and desktop.

But I want to disable these sticky sidebar widgets on mobile.
How can I do it?

That code only applies to screen sizes larger that 1024px - so it will affect larger 'mobile/tablet' devices in landscape views.

You can if you want either:

1. Increase the @media(min-width: 1024px) { to larger value eg.

@media(min-width: 1366px) {

OR

2. Make it apply only devices with fine pointer controls ( eg. Mouse:

@media(min-width: 1024px) and (hover: hover) and (pointer: fine); {

@David:

Actually on my mobile these sticky bar ad widgets are appearing at the bottom.
i.e right after the post content. My intention is to disable these sticky or ad widgets on mobile completely. Even not appearing at the bottom.

Will either solutions (1) or (2) work out?

Hi Chitka,

If you want to completely remove the sidebars from display on mobile, you can do it with CSS:

Try this one.

@media(max-width:768px){
div#right-sidebar, div#left-sidebar {
display:none;
}
}

But if you require to make it hide on bigger devices like tablets, you may have to increase the max-width value of the media rule.

Example:

@media(max-width:1024px){
div#right-sidebar, div#left-sidebar {
display:none;
}
}

@Elvin: Thanks. For the time being my problem is resolved.
But in future, if I would like to just disable certain sidebar widgets on mobile, how is it possible?

The simplest way to hide specific widgets is to:

1. Install this plugin:
https://en-gb.wordpress.org/plugins/widget-css-classes/

2. Then when you edit a widget in the CSS Class field it provides you can add: hide-on-mobile

Alternatively you would need to use some complicated CSS - for example:

@media(max-width:768px){
  #right-sidebar aside:nth-child(2) {
    display:none;
  }
}

the nth-child(2) selector will target just the 2nd widget in the Right Sidebar.

@David: Thanks, I'll try that on my other sites and let you know. Great support.

You're welcome

Is there a way to make the left sidebar appear at the top on mobile/tablets?