Animation Trouble Preview vs. Live Site

[crispybagel]

Hi, i'm having trouble with an animation not working properly on my live site vs when i preview it locally. The video shows how the live website previews vs the local. The second version is the correct one. I'm not sure how to fix it.

JQUERY

var h = $(window).height();

 $(".menu").click(function() {
    if ( $(".top_banner").height() != h)
      $(".top_banner").addClass("expanded_banner"),
      $(".line_top, .line_bot").addClass("marginleft"),
      $(".line_mid").css("transform", "rotate(45deg)"),
      $(".line_mid_2").css("transform", "rotate(-45deg)");
    else
      $(".top_banner").removeClass("expanded_banner"),
      $(".line_top, .line_bot").removeClass("marginleft"),
      $(".line_mid").css("transform", "rotate(0deg)"),
      $(".line_mid_2").css("transform", "rotate(0deg)");
  });

<div class="top_banner">

    <div class="top_bar">
      <button class="menu">
        <div class="line_container">
          <div class="line line_top"></div>
          <div class="line line_mid"></div>
          <div class="line line_mid_2"></div>
          <div class="line line_bot"></div>
        </div>
        //more stuff below

.line_container {
  position: relative;
  height: calc(0.4 * 80px);
  width: calc(0.5 * 80px);
  margin: 30% 25%;
}
.line {
  position: relative;
  height: 2px;
  width: 40px;
  background: white;
  transition: all 0.5s ease-in-out;
}
.marginleft {
  margin-left: calc(0.25 * 80px);
  width: 0;
  transition: all 0.5s ease-in-out;
}
.line_top {margin-top: 0;}
.line_mid , .line_bot {margin-top: calc(16px - 3px);}
.line_mid_2 {margin-top: -2px;}