title: Div is moving when I hide an element and show another element
body: <p>I am working on a mobile version of a nav bar so I have the hamburger menu and when I click on it it pulls out the menu. The hamburger icon is hidden with Javascript and CSS and then Javascript shows an 'X' icon so that the user can close the menu and go back to the webpage.  But when the 'X' icon shows up it moves the title a little to the left and down.  I've checked margins and padding and borders and its just empty space above the title. What can I do to make it so my title doesn't move?  The empty picture is the 'X' icon.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var main = function() {
    /* Push the nav over by 285px over */
    $('.hamburger').click(function() {
      $('#menu').animate({
        left: "0px"
      }, 200);
   $('.hamburger').hide();
   $('.close').show();
   
   
  
   
    });
  
    /* Then push them back */
    $('.close').click(function() {
      $('#menu').animate({
        left: "-100%"
      }, 200);
  
   $('.hamburger').show();
   $('.close').hide();
   
  
    });
  };
  
  
  $(document).ready(main);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
      font-family: Call_of_Ops_Duty;
      src: url('../fonts/Call_of_Ops_Duty.otf');
  }
  
  body {
   margin:0;
  }
  .header {
   background-color:#0D47A1;
   width:100%;
   height:56px;
   line-height:56px;
   display:block;
   position:absolute;
  }
  
  .hamburger {
      position: relative;
      display: inline-block;
      width: 1.25em;
      height: 0.8em;
      margin-right: 0.3em;
      border-top: 0.2em solid #fff;
      border-bottom: 0.2em solid #fff;
   z-index:8;
  }
  
  .hamburger:before {
      content: "";
      position: absolute;
      top: 0.3em;
      left: 0px;
      width: 100%;
      border-top: 0.2em solid #fff;
  }
  .close {
   display:inline-block;
   position: relative;
   left:5%;
   top:7%;
   height:40px;
   width:40px;
   display:none;
  }
  /*.close img {
   position:relative;
   width:40px;
   height:40px;
   display:none;
  }*/
  #heading {
   position:relative;
   display:inline-block;
   left:15%;
   top:0;
   font-family: Call_of_Ops_Duty;
   color:white;
   font-size:18px;
  }
  #heading font {
   font-size:14px;
  }
  span {
    padding-left:2%;
    left:7%;
   }
   #menu {
   position:fixed;
   top:56px;
   left:-100%;
   width:100%;
   height:100%;
   z-index:10;
   background-color:gray;
  }
  #menu ul {
   top:25%;
   list-style:none;
   padding-left:0;
  }
  #menu a {
   text-decoration:none;
   color:black;
  }
  #menu li {
   font-family: Call_of_Ops_Duty;
   font-size:24px;
   text-align:center;
   
  }
  #menu li:first-child {
   top:56px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"&gt;  
  &lt;link type="text/css" rel="stylesheet" href="css/header.css"/&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="js/header.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;div class="header"&gt;
   &lt;span class="hamburger"&gt;&lt;/span&gt;
   &lt;img class="close" src="img/X.png"&gt;
   &lt;div id="heading"&gt; Title
   &lt;/div&gt;
   
   
   &lt;div id="menu"&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="CellHome.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="CellWhyroot.php"&gt;Root&lt;/a&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="CellBestRootApps.php"&gt;Root Apps&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href="jailbreak.php"&gt;Jailbreak&lt;/a&gt;
      &lt;ul&gt;
       &lt;li&gt;&lt;a href="Jailbreakapp.php"&gt;Jailbreak Apps&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
     &lt;li&gt;&lt;a href="contact.php"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
     &lt;!--&lt;li&gt;&lt;a href="CellLogin.php"&gt;Appointment&lt;/a&gt;&lt;/li&gt;--&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>