html - Hiding Fixed Content Behind Div on Mobile -
i have navigation built fixed behind site wrapper. when menu link clicked, site wrapper slides on reveal fixed menu content. works great except fact on touch screens can drag screen (site wrapper) side reveal fixed content behind. there way lock screen not allow horizontal touch? code below.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> html <ul class="navigation"> <img src="img/splashred.svg" alt="" /> <li class="nav-item"><a href="#about">who</a></li> <li class="nav-item"><a href="#services">what</a></li> <li class="nav-item"><a href="#approach">approach</a></li> <li class="nav-item"><a href="#clients">clients</a></li> <li class="nav-item"><a href="#contact">contact</a></li> </ul> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger"></label> <div class="site-wrap"> <!--content--> css: body { overflow-x: hidden; } .navigation { width: 250px; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; z-index: 0; padding-top:10px; list-style: none; background: white; padding:0; margin:0; } .site-wrap { height:100%; min-height: 100%; min-width: 100%; max-width: 100%; background-color: white; position: relative; top: 0; bottom: 100%; right: 0; z-index: 1; } .nav-trigger { position: fixed; clip: rect(0, 0, 0, 0); } label[for="nav-trigger"] { position: fixed; right: 45px; top: 45px; z-index: 2; height:70px; width: 70px; cursor: pointer; background-image: url("menucircle.png"); background-size: contain; } .nav-trigger + label, .site-wrap { transition: right 0.2s; } .nav-trigger:checked + label { right: 250px; } .nav-trigger:checked ~ .site-wrap { right: 250px; }
you have used appropriate meta , used overflows well.
so maybe try this.
body { width:100% }
Comments
Post a Comment