- This topic has 16 replies, 4 voices, and was last updated 3 years ago by Matt.
-
AuthorPosts
-
September 2, 2020 at 12:35 am #1427350Chitika
Hello
I have kept the layout as Sidebar/Content/Sidebar.
I’m using GP Premium plugin.I placed Adsense codes on the left and right sidebars.
I want to make them sticky without using a plugin.Is it possible.
September 2, 2020 at 3:09 am #1427529DavidStaffCustomer SupportHi 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.
September 2, 2020 at 4:38 am #1427631ChitikaI 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/September 2, 2020 at 7:22 am #1427801DavidStaffCustomer SupportTry 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.
September 2, 2020 at 6:50 pm #1428557Chitika@David: Thanks, that worked perfectly. It saved me from another plugin. Great.
September 3, 2020 at 12:34 am #1428793DavidStaffCustomer SupportYou’re welcome
March 21, 2021 at 7:57 pm #1704460Chitika@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?March 22, 2021 at 4:26 am #1704776DavidStaffCustomer SupportThat 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); {
March 22, 2021 at 9:56 pm #1705922ChitikaActually 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?
March 23, 2021 at 12:06 am #1706021ElvinStaffCustomer SupportHi 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; } }
March 23, 2021 at 4:42 am #1706268Chitika@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?March 23, 2021 at 6:28 am #1706382DavidStaffCustomer SupportThe 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.March 23, 2021 at 5:38 pm #1707246Chitika@David: Thanks, I’ll try that on my other sites and let you know. Great support.
March 24, 2021 at 2:28 am #1707570DavidStaffCustomer SupportYou’re welcome
April 12, 2021 at 8:07 am #1731360MattIs there a way to make the left sidebar appear at the top on mobile/tablets?
-
AuthorPosts
- The topic ‘Sidebars Sticky – Left and Right’ is closed to new replies.