The sticky header in the Journal Theme flickers, jumps or behaves erratically while scrolling. This could result from CSS conflicts, JavaScript issues, improper header height, or rendering glitches across devices and browsers.
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
1. Inspect CSS Conflicts
Journal > Theme Editor > Custom Code > CSS
..header-sticky {
position: sticky !important;
top: 0;
z-index: 9999;
background-color: #ffffff;
transition: all 0.3s ease;
}
2. Enable Smooth Scrolling
Journal > Theme Editor > Custom Code > CSS
.html {
scroll-behavior: smooth;
}
3. Disable Overlapping Elements
.header-sticky {
z-index: 9999;
}
4. Fix Header Height and Padding
Journal > Theme Editor > Header > Header Height
..header-sticky {
padding: 10px 20px;
}
5. Update Browser Rendering Behavior
.header-sticky {
backface-visibility: hidden;
perspective: 1000px;
}
6. Check for JavaScript Interference
Journal > Theme Editor > Custom Code > JavaScript
.7. Adjust Sticky Behavior for Mobile
Journal > Theme Editor > Header > Responsive Options
.@media (max-width: 768px) {
.header-sticky {
position: fixed;
width: 100%;
}
}
8. Resolve Browser Compatibility Issues
.header-sticky {
position: -webkit-sticky;
position: sticky;
}
9. Disable and Re-enable Sticky Header
Journal > Theme Editor > Header > Sticky Header
.10. Check Theme and Extension Updates
Journal > Theme Editor > Check for Updates
.11. Custom JS Scroll Event Handling
Journal > Theme Editor > Custom Code > JavaScript
.window.addEventListener("scroll", function() {
const header = document.querySelector(".header-sticky");
if (window.scrollY > 50) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
.header-sticky.scrolled {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
12. Reset Header Settings
Journal > Theme Editor > Reset
.13. Test on a Clean Install
14. Contact Support with Detailed Logs
Final Comment
The sticky header is an essential feature that enhances navigation. Address flickering issues using the above solutions and feel free to ask for additional assistance! 😊