sticky sidebar

Hello,

Thank you for your kind words about the theme—I really appreciate it!

To create a layout with a right sidebar in sticky mode, you’ll need to target the child inside the div.sidebar-box-second-inner. If it has only one child, you can use this CSS:

#page-wrapper .sidebar-box-second-inner .the-child-class {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

If the div.sidebar-box-second-inner has more than one child then you will have to group them into one div and use the class name:
You can use JacaScript and CSS:

(function (Drupal) {
  Drupal.behaviors.sidebarStickyWrapper = {
    attach: function (context) {
      // Find all sidebar-box-second-inner elements within the context.
      const sidebars = context.querySelectorAll('.sidebar-box-second-inner');

      sidebars.forEach((sidebar) => {
        // Skip if already wrapped (idempotent behavior).
        if (sidebar.querySelector('.sticky-wrapper')) {
          return;
        }

        // Create the wrapper div.
        const wrapper = document.createElement('div');
        wrapper.className = 'sticky-wrapper';

        // Move all children into the wrapper.
        while (sidebar.firstChild) {
          wrapper.appendChild(sidebar.firstChild);
        }

        // Append the wrapper back into the sidebar.
        sidebar.appendChild(wrapper);
      });
    },
  };
})(Drupal);

#page-wrapper .sidebar-box-second-inner .sticky-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
}

Best wishes,
Alaa

thanks for the help, always kind and collaborative, a real resource for the Drupal community.
I have just one doubt though... when the portal is viewed from a smartphone or tablet how should I behave with this sidebar? If the sidebar has several children... would the display be blocked? or should I hide them?

Thank you so much for your kind words! I'm grateful to be part of the Drupal community and to collaborate with such amazing individuals.

This code should only run on large screens before the breakpoints are applied to the site. I have updated the JavaScript; please adjust the breakpoint value to match the site's settings.

(function (Drupal) {
  Drupal.behaviors.sidebarStickyWrapper = {
    attach: function (context) {
      const applyStickyWrapper = () => {
        const sidebars = context.querySelectorAll('.sidebar-box-second-inner');

        sidebars.forEach((sidebar) => {
          // Change the number according to the website breakpoints
          if (window.innerWidth > 992) {
            if (!sidebar.querySelector('.sticky-wrapper')) {
              const wrapper = document.createElement('div');
              wrapper.className = 'sticky-wrapper';

              while (sidebar.firstChild) {
                wrapper.appendChild(sidebar.firstChild);
              }

              sidebar.appendChild(wrapper);
            }
          } else {
            // Remove wrapper if it exists
            const wrapper = sidebar.querySelector('.sticky-wrapper');
            if (wrapper) {
              while (wrapper.firstChild) {
                sidebar.appendChild(wrapper.firstChild);
              }
              wrapper.remove();
            }
          }
        });
      };

      // Initial check
      applyStickyWrapper();

      // Add event listener for window resize
      window.addEventListener('resize', applyStickyWrapper);
    },
  };
})(Drupal);

@media (min-width:992px) {
  #page-wrapper .sidebar-box-second-inner .sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
}

Best wishes,
Alaa