How to Make Sidebars Fixed

[itsbobross]

Hi, I have a custom sidebar applied to a series of pages that I’d like to have in fixed position.

You can see a page with it here: http://highresponsemarketing.com/newbie-guide/intro-to-selling-local-marketing/

The problem I’m having is I have only managed to make the text widget in the sidebar fixed, not the whole sidebar itself. This is fine unless I want to add more widgets to the sidebar, in which case they move while the fixed widget stays fixed.

The CSS I used is:
#text-7 {position: fixed}

Because text-7 is the name wordpress gave my widget. The ID of the sidebar is: ups-sidebar-guide-left-sidebar but unfortunately I can’t put that into the CSS because it doesn’t display the ID for some reason so I’m stuck.

Note: I do NOT want to make every sidebar fixed, just the custom one(s) I create. I simply need to keep an entire sidebar fixed and not just one widget inside. Any solution?

[nabeel]

Hi there,

Thanks for writing around! As you may know, making random sidebars sticky is not a theme feature out of the box and requires custom development which is outside of our support scope, with that being said I can point you in the right direction but implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization break you will need to hire a developer.

So kindly consider the following code a guide to get you started on making the sidebars sticky.

First remove all of your Custom CSS for making sidebar sticky and add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function sticky_relocate() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('.page-id-7399 .x-main').offset().top;
    if (window_top > div_top) {
        jQuery('.page-id-7399 .x-sidebar').addClass('stick');
    } else {
        jQuery('.page-id-7399 .x-sidebar').removeClass('stick');
    }
}
(function($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
})(jQuery);

Please note that I’ve used .page-id-7399 in the script to only effect the sidebar on that page, so if you need to make the sidebar sticky on any other page then just change that page’s ID in the above script. To find out page ID’s please see https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 100px;
    right: 120px !important;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}

Hope this helps!

[itsbobross]

thank you!

[nabeel]

You’re most welcome!