global wrapper div min-height 100vh breaks children fixed on mobile

Question

In html i'm globally wrapping content with a div.wrapper min-height:100vh; for :target push-left menu, on mobile it breaks all childrens position:fixed; and stick it to the top of page and not to the visible part.

If you have any idea i tried many many solutions..

You can see this at : http://test.lelabdigital.fr where nav-button-open on the top left corner is position fixed but stick to the top when you scroll bottom.

Thanks

Answer 1

In your main.css 1422 line add position: fixed; .

body:target aside.mobile-nav {
    z-index: 9999;
    overflow-y: hidden;
    position: fixed;
}

In main.css line 1409 try to remove this style it will wprk

.wrapper {
    transform: translateX(0) translateZ(0);
    transition: transform .2s;
    will-change: transform;
}

You also need to remove one more style from your main.css

body:target .wrapper {
    transform: translateX(50vw);
}

If you not romve this , then nav-button-open will not fix when you sroll