<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Then you would need to repeat the data-toggle and data-target selectors for each menu item
<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>
Here it is at work http://jsfiddle.net/jaketaylor/84mqazgq/
This will make your toggle and target selectors specific to screen size and eliminate glitches on the larger menu. If anyone is still having issues with glitches please let me know and I'll find a fix.
EDIT: In the bootstrap v4.1.3 I couldnt use visible/hidden classes. Instead of
d-none d-sm-block and instead of