You can try this custom CSS and JS code:
document.addEventListener("DOMContentLoaded", function() {
var toolbar = document.querySelector('.joms-toolbar');
var triggerPoint = toolbar.offsetTop;
window.addEventListener('scroll', function() {
if (window.scrollY >= triggerPoint) {
toolbar.style.position = 'fixed';
toolbar.style.top = '0';
toolbar.style.width = '100%'; // Ensure full width
toolbar.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)'; // Optional
} else {
toolbar.style.position = 'relative';
toolbar.style.top = '';
toolbar.style.boxShadow = ''; // Remove shadow if added
}
});
});
.joms-toolbar {
position: relative;
z-index: 1000; /* Adjust as needed */
width: 100%;
}