On smaller screens you probably want the nav to be position:absolute so that it overlays content rather than pushing it down and that will solve the issue you are having at the same time.
e.g.
@media screen and (max-width: 991.98px) {
.sticky-top .navbar-collapse {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: rgba(118, 156, 191, 1);
}
}
I’ve added it into my codepen as an example but you may still need to adjust the styling to suit on smaller screen. Add any tweaks in the media query as required.
Another idea would be simply to hide the social icons on smaller screens so that the nav is always at the top and always sticky. (You could add another set of social icons into the dropdown menu which only gets shown at small screen although I’m not keen on duplicating content but could be an easy solution here)
I see you hi-jacked the scroll event to add your dynamic class and although that method works it tends to make the browser work harder than it needs to because it is checking that routine every time the page is scrolled and basically for every pixel. If the page is ‘heavy’ you could find that scrolling becomes ‘janky’ (a technical term) and not a pleasant experience. Modern browsers are better at this but if I use the scroll event I would want to use a debounce routine so that it doesn’t run on every pixel.
The method I provided in my example is so much smoother and needs no ‘magic numbers’ or reference to the scroll event and will not add any lag to normal window scrolling.