Thats because you delete the content before showing the side menu. For a fraction there is no content so there is no scrollbar.
Do you really need to delete the existing content? You could instead just set its visibility to hidden instead of removing it with display:none. visibility just hides things but doesn’t remove them from the flow. Or you could just reduce the opacity of the content down to .2 or something like that. You can use the existing class etc. (However you’d need to place the side menu on top of the existing content.)
Usually you would overlay the side menu on top of the existing content and that would keep the page at the same length and the scrollbar won’t pop in and out. It would also help the user keep their orientation as content that just vanishes can be disconcerting.
If you still want to hide the content completely then you can force a scrollbar all the time by setting the body height to min-height:101vh or overflow-y:scroll.
header-top has that logo/img + hamburger 3 lines, a hamburger is hidden in nonresponsive high width version.
header-bottom is also normally visible in full-width versions.
No CSS is written in style.css for hide class, but in the responsive version, it is translated in the -X direction.
The original content is still there underneath but just faded down a bit. It just helps with the users orientation and they can see what just happened.
Of course if you prefer it blank behind then that’s a choice for you to make
