Offscreen toggle menu pushes main content off right side of screen

Question

Hello and thanks for your time. The following HTML, CSS, and JavaScript serves to create an off-screen menu that toggles into view upon clicking the anchor. The main content of the page is then sent off-screen on the right. Is there a way to make the main content wrap or resize to stay fully visible on the screen when the off-screen menu pushes it to the right?

$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
    return false;
  });
});

nav {
  width: 700px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.site-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.push-wrap {
  border: 1px solid red;
  -webkit-transition: all 300ms ease 0;
  -moz-transition: all 300ms ease 0;
  -o-transition: all 300ms ease 0;
  transition: all 300ms ease 0;

  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.show-nav .push-wrap {
  border: 1px solid green;
  transform: translate(700px, 0); 
  transform: translate3d(700px, 0, 0);
}

body {
  background: #e3e3e3;
}

a {
  transition: all 300ms ease;
}

nav {
  background: #2b343f;
  text-align: center;
  -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li a {
  display: block;
  text-decoration: none !important;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
}

nav ul li a:hover {
  background: #4EFFFF;
  color: #000;
}

article {
  position: relative;
  min-height: 1500px;
  background: #e3e3e3;
  z-index: 9;
  width: 100%;
}

article h1 {
  text-align: center;
  margin: 40px 0 30px;
}

article p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}

article a.toggle-nav {
  position: absolute;
  font-size: 25px;
  color: rgb(255, 139, 139);
  top: 0;
  left: 0;
  background: #444;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="site-wrap">

  <nav>
    <ul>
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li> 
    </ul>
  </nav>

  <div class="push-wrap">

    <article>
      <a href="#" class="toggle-nav"></a>
      <div class="container">
        <div class="row">
          <div class="col-md-12">

            <h1>Off Screen Navigation</h1>
            <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah !</p>

          </div>
        </div>
      </div>
    </article>

  </div>

</div>

Thank you!

Answer 1

I don't suggest you change the size of your container for responsive reasons, since all elements inside will be affected and you could have many layout issues.

But anyway if you can ensure all it's well coded and will fit you can see you are adding the class show-nav wich translates your main container to the right, what you need is change that to modify the width instead, using calc() :

Run Snippet on Full Page

$(function() {
  $('.toggle-nav').click(function() {
    $('body').toggleClass('show-nav');
    return false;
  });
});

nav {
  width: 700px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.site-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.push-wrap {
  border: 1px solid red;
  transition: all 1.2s linear;
  width:100%;
}
.show-nav .push-wrap {
  border: 1px solid green;
  width: calc(100% - 700px);
  transform: translate(700px, 0);
}
body {
  background: #e3e3e3;
}
a {
  transition: all 300ms ease;
}
nav {
  background: #2b343f;
  text-align: center;
  -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
  box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li a {
  display: block;
  text-decoration: none !important;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
}
nav ul li a:hover {
  background: #4EFFFF;
  color: #000;
}
article {
  position: relative;
  min-height: 1500px;
  background: #e3e3e3;
  z-index: 9;
  width: 100%;
}
article h1 {
  text-align: center;
  margin: 0;
}
article p {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 40px;
}
article a.toggle-nav {
  position: absolute;
  font-size: 25px;
  color: rgb(255, 139, 139);
  top: 0;
  left: 0;
  background: #444;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrap">
  <nav>
    <ul>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
      <li><a href="#">Link</a>
      </li>
    </ul>
  </nav>
  <div class="push-wrap">
    <article>
      <a href="#" class="toggle-nav"></a>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Off Screen Navigation</h1>
            <p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
              !
            </p>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>