Hey Again,

Thanks for reaching out! .

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (min-width: 1px) and (max-width: 999px) {
    .n-sticky.theiaStickySidebar {
        position: fixed !important;
        width: auto !important;
        left: 0px !important;
    }
}

Let me know if this helps! Happy to assist further if needed.

Best,

Hey Again,

Here’s what you can try:

@media only screen and (min-width: 1px) and (max-width: 999px) {
    .nectar-sticky-column {
        position: fixed !important;
        width: auto !important;
        left: 0px !important;
    }
}

Best,

Hey Again,

The JS code does not get enabled in Mobile screen sizes , to confirm this try refreshing the page after switching to mobile width in the browser.

At the moment there is no such JS code to enable the sticky feature for mobile the same as Desktop. 

However have noted it in the wishlist. 

Best 

Try the below CSS solution.

You will have to refresh the page if you are resizing the browser to the mobile width and testing.

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (min-width: 1px) and (max-width: 999px) {
    .nectar-sticky-column {
        position: fixed !important;
        width: auto !important;
        left: 0px !important;
    }
}

Thanks

In that case I am afraid the sticky columns cant be replicated on mobile using CSS alone. 

Best 

Try switching to the CSS powered featured so we can try and write up custom css for it: 

Best,

Hi there,

Thanks for writing back.

To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials 

(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us? 

If you prefer, you can safely share the access through an access plugin such as Controlled Admin Access.

Before you provide this information, we strongly recommend taking a backup of your site.

If you have any concerns or questions about this process, please don't hesitate to let me know.

Best regards,

Hi there,

Thanks for writing back.

Try adding the JS code as a workaround:

jQuery(document).ready(function($) {
    function makeSticky() {
        var element = $(".n-sticky");
        var parentContainer = $(".nectar-sticky-column-css");

        if (element.length > 0 && parentContainer.length > 0) {
            var elementTop = element.offset().top;
            var stickyTop = 50; // Adjust this value as needed
            var elementWidth = element.outerWidth(); // Get the element's width
            var parentBottom = parentContainer.offset().top + parentContainer.outerHeight();
            var marginBottom = 10; // Space before the end of the parent container

            var checkSticky = function() {
                var windowWidth = $(window).width();
                var scrollTop = $(window).scrollTop();

                if (windowWidth >= 690 && windowWidth < 1000) {
                    if (scrollTop + stickyTop >= elementTop && scrollTop + stickyTop + element.outerHeight() < parentBottom - marginBottom) {
                        element.css({
                            'position': 'fixed',
                            'top': stickyTop + 'px',
                            'width': elementWidth + 'px', // Set the width
                            'z-index': '10'
                        });
                    } else if (scrollTop + stickyTop + element.outerHeight() >= parentBottom - marginBottom) {
                        element.css({
                            'position': 'absolute',
                            'top': (parentBottom - element.outerHeight() - marginBottom - parentContainer.offset().top) + 'px',
                            'width': elementWidth + 'px', // Set the width
                            'z-index': '10'
                        });
                    } else {
                        element.css({
                            'position': '',
                            'top': '',
                            'width': '', // Reset the width
                            'z-index': ''
                        });
                    }
                } else {
                    element.css({
                        'position': '',
                        'top': '',
                        'width': '', // Reset the width
                        'z-index': ''
                    });
                }
            };

            $(window).on('scroll', checkSticky);
            $(window).on('resize', function() {
                elementTop = element.offset().top;
                elementWidth = element.outerWidth(); // Update the element's width on resize
                parentBottom = parentContainer.offset().top + parentContainer.outerHeight();
                checkSticky(); // Recalculate sticky behavior on resize
            });

            // Initial check
            checkSticky();
        }
    }

    // Initial call to make the element sticky
    makeSticky();
});

This is a one-time exception as providing custom code support is beyond our scope of support.

Also, the sticky column by design does not apply for view ports above 1000px.

I really hope this proves helpful for you. If you have any more questions or run into any problems, please feel free to reach out.

Best regards,

Hello there,

Thanks for writing back.

Thanks for pointing this out, we've taken note of this as an area of improvement.

If you have any more questions or run into any problems, please feel free to reach out.

Best regards,

Hi there,

Thanks for writing back.

At the moment we don't have these options for mobile viewport as it may require code customization which is beyond our scope of support.

However, we are partnered with a trusted provider of expert-level Salient customization. If you are interested in initiating a project, we recommend referring to our guide at the following link: https://themenectar.com/salient/customization/

In the meantime, please don't hesitate to reach out with further questions. We're happy to help.

Hi again,

Thank you for getting back to us.

Allow me to escalate this to the developer for further advise.

We highly appreciate your patience on this matter.

Kind regards,

Hey Co-Brains,

We do not have plans to enable sticky positioning on mobile by default, however I've noted the idea for an option to do that. For now, you can accomplish that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:

@media only screen and (min-width: 1px) and (max-width: 999px) {
    html body {
        overflow: visible;
    }
    .vc_row:not(.vc_row-o-equal-height) .nectar-sticky-column-css.vc_column_container > .n-sticky {
        height: 100%;
    }
    .nectar-sticky-column-css.vc_column_container > .n-sticky > .vc_column-inner {
        position: sticky;
        top: var(--nectar-sticky-top-distance);
   }
}

Kind regards