[Resolved] The Right sidebar overlays on top of the left sidebar on mobile.

Home Forums Support [Resolved] The Right sidebar overlays on top of the left sidebar on mobile.

Home Forums Support The Right sidebar overlays on top of the left sidebar on mobile.

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #1958430
    Onur

    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/

    XPath in selenium swtestacademy

    Thanks,
    Onur

    #1958513
    Ying
    Staff
    Customer Support

    Hi 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 πŸ™‚

    #1958698
    Onur

    Hi 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,
    Onur

    #1959159
    Ying
    Staff
    Customer Support

    We 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.

    #1959297
    Onur

    I 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?

    #1959299
    Onur
    #1959450
    Elvin
    Staff
    Customer Support

    Hi 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;
        }
    }
    #1959666
    Onur

    Hi, 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.

    #1960183
    Ying
    Staff
    Customer Support

    Elvin’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!

    #1960278
    Onur

    I will write when I will do it. Maybe I will have cloned server or staging environment. I will let you know here.

    #1960482
    Ying
    Staff
    Customer Support

    Keep up updated.

    Once it’s online, we will be happy to have a look then πŸ™‚

    #1963137
    Onur

    Hi 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

    #1963214
    David
    Staff
    Customer Support

    Hi 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 */
        }
    }
    #1963562
    Onur

    Hi 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.

    #1963577
    Ying
    Staff
    Customer Support

    You can make any of the widgets stick, give each of them 2 classes: sticky-widget and sticky-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;
    }
Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.