Bootstrap offcanvas hides the nav without using overflow:hidden! No x scrollbar! What magic is it?
here is my codepen: https://codepen.io/noobcoder137/pen/BaeLeYK
I have checked every possible html element, but there is no overflow: hidden. How does bootstrap hides the nav whithout having an overflow scroll bar?! I need to figure out the magic behind this, pls help me, I've been analyzing the css code for hours.
7 Replies
there is a .show class that is toggled with javascript
yeah but how is the menu hidden? There is no overflow and no horizontal scroll bar.
there is a overflow hidden on the body. it will dissapear just after the menu is transitioned and the visability is set to hidden
all about timing
no , that overflow on body prevents scrolling top and down when the menu appear, when the menu is offscreen, the overflow on body is removed and there is no horizontal scrollbar causing by the menu offscreen
i think it also takes care of the menu, watch the timing of it being added and removed
the overflow is added immediatly when opening the menu. but it waits to remove it untill the menu is closed again
Ah i figured it out, its because of position:fixed, position:fixed for someone reason doesn’t add a horizontal scroll bar. For my project I use position absolute + translate on nav to hide it which is causing a scrollbar, hence i had to use overflow:hidden. Thanks anyways