Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet:
window.onscroll = function() {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
document.getElementById("navbar").classList.add('fixed-navbar');
} else if (document.body.scrollTop < 10 && document.documentElement.scrollTop < 10) {
document.getElementById("navbar").classList.remove('fixed-navbar');
}
}html {
font-size: 87.5%;
}
etc...
What is causing the horizontal scroll bars to appear despite the header width being set to 100%?
In addition to my previous question, I encounter an issue when scrolling down that affects the transition:
.navbar.fixed-navbar .navbar-collapse {
background: #fff !important;
}
By adding transition-delay: 1s; the transition issue is resolved but it introduces a 1s delay when the button is pressed on mobile. What is the most effective and elegant solution to this problem?