Sliding Menu Stacks Text When Closing

I have a sliding menu:

@font-face {
  font-family: ErasBold;
  src: url('fonts/erasbd.TTF'); /* Chrome, Opera, Firefox */
}

@font-face{
  font-family: ErasDemi;
  src: url('fonts/erasdemi.TTF');
}
@font-face{
  font-family: ErasLight;
  src: url('fonts/eraslight.TTF');
}
body {
  background-color: #EDEDED;
  width: 90%;
  min-height: 100%;
  /*border-color: #000000; !INCASE YOU WOULD LIKE TO SEE WHERE THE BODY IS LOCATED ON THE SCREEN. USE FOR DEBUGGING VARIOUS DEVICES!
  border-style: outset;*/
  margin: 0 auto;
  transition: 1s;
}


#header {
  background-color: #000000;
  position: fixed;
  height: 95px;
  width: 100%;
  top: 0
    left: 0;
  right: 0;
}

#mainpage {
  background-color: #EDEDED;
  height: 82%;
  width: 100%;
  margin: 0 auto -4em;
  position: relative;
  padding: none;
  overflow: auto;
}

#footer{
  height: 80px;
  width: 100%;
  background-color: #000000;
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;


}

#logo{
  height: 100%;
  width: auto;
}


.sideNav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}

.sideNav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 27px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-family: ErasLight;
}


.sideNav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}	

.sideNav .closeButton{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 40px;
  margin-left: 50px;
}

@media screen and (max-height: 450px){
  .sideNav {padding-top: 15px;}
  .sideNav a {font-size: 18px;}
}

#menuStuff{
  color: white;
  float: right;
  font-size: 30px;
  font-family: ErasLight;
  text-decoration: none;
  margin-top: 20px;
  margin-right: 20px;
}

#menuStuff .hover {
  color: #FFFFFF;
  text-decoration: none;
}

<body>		

  <div id="header">

    <a href="index.html"> <img src="images/logo.png" id="logo"> </a>

    <div id="mySideNav" class="sideNav">
      <a href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
      <a href="index.html">Home</a>
      <a href="">About Me</a>
      <a href="">My Work</a>
    </div>

    <a href="#"><span onclick="openNav()" id="menuStuff">Menu &#9776;</span></a>

    <script>
      function openNav() {
        document.getElementById("mySideNav").style.width = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
      }

      function closeNav() {
        document.getElementById("mySideNav").style.width = "0px";
        document.body.style.backgroundColor = "white";
      }
    </script>

  </div>

  <div id="mainpage">

  </div>


  <div id="footer">

  </div>
</body>

http://codepen.io/dangranger/pen/WGWqvm

And when you click the "x" to close it, the text stacks on top of each other when it moves inwards. How can I make this so that it stays how it is and just slides away?

(Sorry for poor structure I'm struggling to explain)

Solution

That's because you change the width. Even when the .sideNav has width: 1px (at the start of the animation), the x still there.

You can animate the position instead:

Note: pay attention that instead of changing the style in the script, I just toggle the open class, and control the style in the css. I think that it's a better approach.

function openNav() {
  document.getElementById("mySideNav").classList.add('open');
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
  document.getElementById("mySideNav").classList.remove('open');
  document.body.style.backgroundColor = "white";
}

@font-face {
  font-family: ErasBold;
  src: url('fonts/erasbd.TTF'); /* Chrome, Opera, Firefox */
}

@font-face{
  font-family: ErasDemi;
  src: url('fonts/erasdemi.TTF');
}
@font-face{
  font-family: ErasLight;
  src: url('fonts/eraslight.TTF');
}
body {
  background-color: #EDEDED;
  width: 90%;
  min-height: 100%;
  /*border-color: #000000; !INCASE YOU WOULD LIKE TO SEE WHERE THE BODY IS LOCATED ON THE SCREEN. USE FOR DEBUGGING VARIOUS DEVICES!
  border-style: outset;*/
  margin: 0 auto;
  transition: 1s;
}


#header {
  background-color: #000000;
  position: fixed;
  height: 95px;
  width: 100%;
  top: 0
    left: 0;
  right: 0;
}

#mainpage {
  background-color: #EDEDED;
  height: 82%;
  width: 100%;
  margin: 0 auto -4em;
  position: relative;
  padding: none;
  overflow: auto;
}

#footer{
  height: 80px;
  width: 100%;
  background-color: #000000;
  position: fixed; 
  bottom: 0;
  left: 0;
  right: 0;


}

#logo{
  height: 100%;
  width: auto;
}


.sideNav{
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  transform: translateX(250px);
}

.sideNav.open {
    transform: translateX(0);  
}

.sideNav a{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 27px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-family: ErasLight;
}


.sideNav a:hover, .offcanvas a:focus{
  color: #f1f1f1;
}	

.sideNav .closeButton{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 40px;
  margin-left: 50px;
}

@media screen and (max-height: 450px){
  .sideNav {padding-top: 15px;}
  .sideNav a {font-size: 18px;}
}

#menuStuff{
  color: white;
  float: right;
  font-size: 30px;
  font-family: ErasLight;
  text-decoration: none;
  margin-top: 20px;
  margin-right: 20px;
}

#menuStuff .hover {
  color: #FFFFFF;
  text-decoration: none;
}

<body>		

  <div id="header">

    <a href="index.html"> <img src="images/logo.png" id="logo"> </a>

    <div id="mySideNav" class="sideNav">
      <a href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
      <a href="index.html">Home</a>
      <a href="">About Me</a>
      <a href="">My Work</a>
    </div>

    <a href="#"><span onclick="openNav()" id="menuStuff">Menu &#9776;</span></a>
  </div>
  <div id="mainpage">

  </div>
  <div id="footer">

  </div>
</body>