view raw
Tom Tom - 1 year ago 79
HTML Question

Hiding Fixed Content Behind Div on Mobile

I have a navigation built that is fixed behind the site wrapper. When the menu link is clicked, the site wrapper slides over to reveal the fixed menu content. Works great except for the fact that on touch screens you can drag the screen (site wrapper) to the side to reveal the fixed content behind. Is there a way to lock the screen to not allow horizontal touch? Code below.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


<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>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap"> <!--content-->

body {
overflow-x: hidden;
.navigation {
width: 250px;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
list-style: none;
background: white;
.site-wrap {
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;
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 the appropriate meta and used overflows as well.

So maybe you could try this.

body {