title: I want my sidenav to push the content from the page
body: <p>OK so I have a strange request. I have a normal content page and a sidebar that goes from left to right . At the moment , when i click on the icon , the navbar goes to the left and pushes the content but it only makes it resize (the content of the main page) . I need the content to move with the navbar but it needs to be removed . Like dissapering behind the page . I have no idea if that makes sence to you guys. 
  <a href="https://i.stack.imgur.com/if4IE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/if4IE.png" alt="enter image description here"></a></p>
  
  <p>Maybe this image will help somehow so you could understand . </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="pop opened"&gt;
      &lt;nav class="pop-nav"&gt;
          &lt;div class="pop-links"&gt;
              &lt;li&gt;&lt;a href="javascript:;"&gt;What we do&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:;"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:;"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:;"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
          &lt;div class="pop-social"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;span&gt;&lt;i class="s s-facebook footer-soc"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;span&gt;&lt;i class="s s-twitter footer-soc"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="javascript:;"&gt;&lt;span&gt;&lt;i class="s s-youtube footer-soc"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
      &lt;div class="wrapper"&gt;
          &lt;header class="header"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-3"&gt;
                      &lt;!--Icon missing instead of img--&gt;&lt;img src="./images/logo_desktop.png" alt="HCI Logo" class="logo"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-9"&gt;
                      &lt;nav class="header-nav"&gt;
                          &lt;li&gt;&lt;a href="javascript:;"&gt;What we do&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="javascript:;"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="javascript:;"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="javascript:;"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/nav&gt;
                      &lt;span&gt;&lt;i class="s s-hamburger hamburger"&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
      &lt;/div&gt;
      &lt;section class="hero" style="background-image: url(./images/hero.png)"&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="row row-big"&gt;
                  &lt;div class="col-1"&gt;&lt;/div&gt;
                  &lt;div class="col-10"&gt;
                      &lt;h1 class="title"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit
                      &lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;div class="col-1"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row row-small"&gt;
                  &lt;div class="col-12"&gt;
                      &lt;h1 class="title"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit
                      &lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-12"&gt;
                      &lt;button type="button" class="btn"&gt;Sign up now&lt;span&gt;&lt;i class="s s-arrow"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>This is the important part with the navigation. THe rest is just page content.</p>
  
  <pre><code>.main {
    transition: margin-right .5s;
    margin-right: 0;
  }
  
  .pop {
    position: fixed;
    z-index: 10;
    height: 100%;
    background-color: $dark-blue;
    width: 0;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 0.5s;
  
    .pop-nav {
      padding: 46px 0 0 100px;
      border-top: 1px solid $grey-blue;
      margin: 79px 0 0;
      @include breakpoint(phone) {
          padding: 33px 0 0 35px;
      }
    }
  }
  
  .pop-links {
    padding-bottom: 65px;
  
    li {
  
      display: block;
      padding-bottom: 40px;
  
      &amp;:last-child {
        padding-bottom: 0;
      }
  
    a {
      color: $white;
      }
    }
  }
  </code></pre>
  
  <p>Hope you guys can help me.</p>
  
  <pre><code>$('.hamburger').on('click', function(){
          $(this).toggleClass('opened');
          if ($(this).hasClass('opened')){
              $(window).resize(function(){
                  if ($(window).width() &lt;= 640){
                      $('.pop').css({'width' : '255px'});
                      $('.main').css({'margin-right' : '255px' , "padding-right" : "255px"});
                  }
                  else{
                      $('.pop').css({'width' : '550px'});
                      $('.main').css({'margin-right' : '550px'});
                  }
              }).resize();
          }
          else {
              $('.pop').css({'width' : '0'});
              $('.main').css({'margin-right' : '0'});
          }
      })
  </code></pre>