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

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -