- This topic has 28 replies, 4 voices, and was last updated 2 years, 5 months ago by Ying.
-
AuthorPosts
-
October 9, 2021 at 11:54 am #1958430Onur
Hi,
On mobile phones after content, the right sidebar overlays on top of the left sidebar. Is there any way to solve this problem with custom CSS or another trick?
Link: https://www.swtestacademy.com/xpath-selenium/
Thanks,
OnurOctober 9, 2021 at 3:01 pm #1958513YingStaffCustomer SupportHi Onur,
Are you using a plugin to make the right sidebar sticky?
It seems using JS to make the sidebar sticky.
You might need some custom coding to fix the issue which is out of the scope of this forum.
I would recommend reaching out to the plugin support, see if there’s any setting you can use to turn off the sticky on mobile.
Alternatively, if you just want to make some widgets sticky, we can help with CSS solution without using that plugin.
Let me know π
October 10, 2021 at 12:04 am #1958698OnurHi Ying,
First, thanks a lot for your reply.
Yes, I am using this plugin for fixed-widgets: https://wordpress.org/plugins/q2w3-fixed-widget/
If I can fix the widgets via custom CSS, it will also work for me. Would you please guide me on how can I do that?
It will be better for me not to use a plugin for this and it will be nice to have this functionality as a theme option if possible in the next releases?
Thanks,
OnurOctober 10, 2021 at 10:31 am #1959159YingStaffCustomer SupportWe would be happy to help with CSS solutions. I’m not aware of bringing this to the next release Unfortuanly.
If you want to go with the CSS solution, can you disable the plugin first?
Then let us know which widget or widgets you want it or them to be sticky.
October 10, 2021 at 2:06 pm #1959297OnurI will disable the widget plugin.
I want to make the right sidebar ads widgets sticky for example. If I know how to do it with CSS, I think I can apply it to any widgets, don’t I?
October 10, 2021 at 2:07 pm #1959299OnurOctober 10, 2021 at 11:25 pm #1959450ElvinStaffCustomer SupportHi Onur,
Can you have it disabled and let us have a look?
As for CSS examples, here’s one: (making the right and left sidebar’s last widget
(:last-child)
sticky)@media(min-width: 769px) { .site-content { display: flex; } .inside-right-sidebar, .inside-left-sidebar { height: 100%; min-height: 100%; } .inside-right-sidebar >*:last-child, .inside-left-sidebar >*:last-child, { position: sticky; position: -webkit-sticky; top: 60px; } }
October 11, 2021 at 4:27 am #1959666OnurHi, Elvin, I disabled the plugin and added this CSS as an Additional CSS in customization. After, I cleared the cache but it did not work. Then, I enabled the plugin again for stickiness.
October 11, 2021 at 10:31 am #1960183YingStaffCustomer SupportElvin’s CSS is an example, it should work for most cases.
If it doesn’t work on your site, we’ll have to write more specific code, in order to do that the plugin needs to be disabled, and all the cache needs to be flushed.
Let us know!
October 11, 2021 at 12:03 pm #1960278OnurI will write when I will do it. Maybe I will have cloned server or staging environment. I will let you know here.
October 11, 2021 at 8:23 pm #1960482YingStaffCustomer SupportKeep up updated.
Once it’s online, we will be happy to have a look then π
October 14, 2021 at 5:16 am #1963137OnurHi Ying & Elvin,
The CSS worked well but I want to ask you one more thing which I really want to do for sticky widgets.
That code worked on the last element in the sidebar but I want to make any widgets in the sidebars based on my needs.
I created a .stick class like below
.sticky-widget{ position: sticky; position: -webkit-sticky; top: 60px; height: 100%; }
And when I set it as a widgets advanced section as a “Additional CSS class(es)” it is not working because I need to apply it one level up, in <aside> section. If I apply it manually on chrome dev tools it is working.
Is there any way to make any widgets stick via CSS?
By the way, I also used below CSS to make the last two elements sticky
.inside-right-sidebar >*:nth-last-child(-n+2)
But this time the last element was overlaying the first element. It did not work as expected.
Right now only the last elements are stick on the website but my requirement is simply to make the last two elements sticky for the right sidebar and make the last element sticky for the left sidebar.
Sample page: https://www.swtestacademy.com/xpath-selenium/
Thanks a lot. π
Onur
October 14, 2021 at 7:04 am #1963214DavidStaffCustomer SupportHi there,
The simplest fix would be to load the 2 adverts in a single widget.
As theres no way to stop them from overlapping at some point on scrolling without using Javascript.Heres one CSS method with the two widgets as they currently are that will keep them from overlapping until you reach the very end of the content. Note it relies on knowing the the height of the one from last widget… so those adverts can’t be variable in size.
@media(min-width: 769px) { .site-content { display: flex; } .inside-right-sidebar, .inside-left-sidebar { height: 100%; min-height: 100%; } .inside-right-sidebar >*:last-child, .inside-right-sidebar >*:nth-last-child(2), .inside-left-sidebar >*:last-child { position: sticky; position: -webkit-sticky; top: 60px; } .inside-right-sidebar >*:last-child { top: 730px; /* adjust for height of previous widget */ } }
October 14, 2021 at 10:04 am #1963562OnurHi David,
Thanks for your reply. Is there any way to make any widget sticky like sticky-widget plugin? Which is not working for the new WordPress widget structure.
I will also search for this.
Thanks.
October 14, 2021 at 10:24 am #1963577YingStaffCustomer SupportYou can make any of the widgets stick, give each of them 2 classes:
sticky-widget
andsticky-widget-number
, then you can try something like this:.inside-right-sidebar >.sticky-widget, .inside-right-sidebar >.sticky-widget { position: sticky; position: -webkit-sticky; }
Then you need to define the sticky position for each of the
sticky-widget
, eg:.inside-right-sidebar .sticky-widget.sticky-widget-1 { top: 200px; } .inside-right-sidebar .sticky-widget.sticky-widget-2 { top: 400px; } .inside-right-sidebar .sticky-widget.sticky-widget-3 { top: 600px; }
-
AuthorPosts
- You must be logged in to reply to this topic.