Bootstrap Side Nav禁用水平滚动

Question

I have a side nav that I plan on using for my site. However, when I resize the screen to mobile and open the side menu, the scroll wheel becomes visible and am able to scroll of to the side horizontally. I want to disable this from happening so that when the side nav is open, horizontal scroll becomes locked/disabled. I've been trying to figure out how to disable it but cannot figure out how. Any help would be much appreciated.

I've tried the css width:100%; overflow-x:hidden; width:100%; overflow-x:hidden; but that did not work.

Here is the Codepen

Answer 1

I would switch to using transform instead:

.body-slide-in {
 tranform: translateX(200px);
}

Transform will move the div visually without altering it's actual position in the DOM. This will be far less likely to cause layout, overflow or position issues.

EDIT--

However, if you wish to use the overflow option, try adding overflow-x: hidden; to the .container-fluid div directly above the .body-slide-in element. It should work.