title: Window resize function not working for header navigation
body: <p>I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links. </p>
  
  <p>There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.</p>
  
  <p>Here is the <a href="https://codepen.io/mustafa2808/pen/BxMVKN" rel="nofollow noreferrer">codepen link</a> i tried</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#sidebarCollapse").on('click', function () {
    $('#sidebar').toggleClass('active');
  });  
  $(".main-nav li a").on('click', function(){
    $(".main-nav li a").removeClass('active');
    $(this).addClass('active');
  });  
   
  
  // Menu Add Class Left
  $(".hamburger-menu").click(function(){
    $(".mob-menu").toggleClass("slide-left");
  });  
  
  //  Menu Add Class Close    
  $('.mdl-layout__obfuscator').click(function(){
    $(".mob-menu").removeClass("slide-left");
  });  
  
  var domWidth = $(window).width();
  function moveElements() {
  var mobMenu = $('.mob-menu'),
  $mainNav = $('.main-nav'),
  respNav = $('.resp-nav'),
  mainHdr = $(".global-header");
    
  if( domWidth &lt; 700) {
    //alert(domWidth);
    $('.main-nav').appendTo('.resp-nav');
  }
  } . 
  
  $(window).on('load resize',function() {
    // alert('hi');
    moveElements();   
    $(window).resize(function() {
      moveElements();
    });   
  
  });  </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* ---------------------------------------------------
  GLOBAL HEADER PAGE
  ----------------------------------------------------- */
  
  textarea,
  input,
  button {
    outline: none;
  }
  
  .txtlabel {
    font-size: 12px;
    text-align: left;
    color: #706e6b;
    padding-bottom: 11px;
    display: block;
  }
  
  .global-header {
    width: 100%;
    display: block;
    height: 50px;
    box-shadow: 0 2px 4px 0 #e8ebf3;
    -moz-box-shadow: 0 2px 4px 0 #e8ebf3;
    -webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
    position: relative;
    background-color: #f1f1f1;
  }
  
  .g-logo {
    padding: 7px 24px;
    float: left;
  }
  
  .m-g-logo {
    display: none;
    padding: 7px 20px;
    float: left;
  }
  
  .hamburger-menu {
    display: none;
  }
  
  .resp-nav {
    margin-top: 20px;
    float: left;
  }
  
  .mob-menu {
    display: none;
    padding: 10px;
    box-shadow: 2px 0 3px 0 #b5b7bd;
    -moz-box-shadow: 2px 0 3px 0 #b5b7bd;
    -webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
    /*position: fixed;*/
    position: absolute;
    -webkit-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    background: #fff;
    top: 0;
    bottom: 0;
    color: #333;
    z-index: 9999;
    width: 240px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
  }
  
  .profile-info {
    float: left;
    width: 100%;
  }
  
  .profile-icon {
    width: 23px;
    height: 23px;
    margin: 8px;
    display: block;
  }
  
  .profpic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    background-color: #394961;
    float: left;
    margin: 5px 0px 5px 5px;
  }
  
  .profile-info span {
    color: #626579;
    font-size: 16px;
    margin: 3px 0 0 3px;
  }
  
  .prof-name {
    float: left;
    width: 68%;
    margin: 0 0 0 20px;
  }
  
  .prof-name a.link {
    float: left;
    margin: 0 10px 0 3px;
  }
  
  .prof-name a.link:first-child {
    position: relative;
  }
  
  .prof-name a.link:first-child:after {
    content: "|";
    position: absolute;
    right: -10px;
    color: #9ea6a9;
  }
  
  .icon-hamburger {
    height: 5px;
    background-color: black;
    margin: 6px 0;
    width: 20px;
    float: left;
    border: none;
    cursor: pointer;
  }
  
  .main-nav {
    list-style: none;
    float: left;
    margin-left: 30px;
  }
  
  .main-nav li {
    list-style: none;
    float: left;
  }
  
  .main-nav li a {
    color: #626579;
    padding: 14px 30px;
    display: block;
  }
  
  .main-nav li a:hover {
    color: #00a0e7;
  }
  
  .main-nav li a.active {
    color: #00a0e7;
    border-bottom: 3px solid #00a0e7;
    background-color: #eef0f6;
  }
  
  .nav-icon {
    float: left;
    padding: 10px;
  }
  
  .pull-right i[class^='icon-'] {
    width: 32px;
    height: 32px;
    display: block;
  }
  
  .icon-search {
    background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
  }
  
  .icon-notification {
    background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
  }
  
  .icon-profile {
    background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
    position: relative;
    margin-right: 30px;
    border-radius: 50%;
  }
  
  .icon-profile:after {
    background: url("../../imgs/global-header/page-1.svg") no-repeat;
    display: block;
    width: 9px;
    height: 6px;
    position: absolute;
    content: "";
    top: 14px;
    right: -20px;
  }
  
  .icon-profile:before {
    background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    content: "";
    top: 7px;
    right: 8px;
  }
  
  .nav-icon:hover {
    background-color: transparent;
  }
  
  .nav-icon:not(.active):hover {
    background-color: #eef0f6;
    cursor: pointer;
  }
  
  .usage {
    list-style: none;
  }
  
  .usage ul {
    list-style: disc;
    list-style-position: outside;
  }
  
  
  /* search */
  
  .srch {
    position: relative;
    display: inline-block;
    margin-right: 30px;
  }
  
  .pull-left {
    float: left;
  }
  
  .pull-right {
    float: right;
  }
  
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .ui-front {
    list-style: none!important;
    background-color: #fff;
    color: #626579;
    font-size: 12px;
    font-weight: 500;
    width: 240px!important;
    min-width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border: 1px solid #F1F5F6;
    border-radius: 4px;
    padding: 10px 8px!important;
  }
  
  .ui-front li {
    padding: 8px 8px!important;
    cursor: pointer;
  }
  
  .slide-left {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 99999;
  }
  
  .mdl-layout__obfuscator {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
  
  .slide-left~.mdl-layout__obfuscator {
    background-color: rgba(0, 0, 0, .5);
    visibility: visible;
  }
  
  .slide-menu {
    position: fixed;
    -webkit-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    background: #fff;
    top: 0;
    bottom: 0;
    color: #333;
    z-index: 9999;
    width: 250px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
  }
  
  @media only screen and (max-width: 768px) {
    .main-nav {
      display: block;
      width: 100%;
      margin: 0;
    }
    .main-nav ul {
      padding: 0;
    }
    .main-nav ul li {
      width: 100%;
      margin: 0;
    }
    .nav-icon:nth-child(3) {
      display: none;
    }
    .g-logo {
      display: none;
    }
    .m-g-logo {
      display: block;
      padding: 7px 24px;
      float: left;
    }
    .hamburger-menu {
      display: block;
    }
    .global-header .rightmenu {
      position: absolute;
      right: 12px;
    }
    .mob-menu {
      display: block;
    }
    .global-header {
      width: 100%;
      display: block;
      height: 500px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="global-header"&gt;
    &lt;div class="mob-menu"&gt;
      &lt;div class="profile-info"&gt;
        &lt;div class="profpic"&gt;&lt;i class="profile-icon"&gt;&lt;/i&gt;&lt;/div&gt;
        &lt;div class="prof-name"&gt;
          &lt;span&gt;Marvin Duncan&lt;/span&gt;
          &lt;a href="javascript:void(0)" class="link"&gt;Profile&lt;/a&gt;
          &lt;a href="javascript:void(0)" class="link"&gt;Logout&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="resp-nav"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="pull-left"&gt;
      &lt;a href="javascript:void(0)" class="g-logo" title="Genpact Cora"&gt;Logo&lt;/a&gt;
    &lt;/div&gt;
    &lt;nav class="main-nav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)" class="active"&gt;Label 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Label 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div class="pull-right rightmenu"&gt;
      &lt;div class="nav-icon" title="Profile"&gt;&lt;i class="icon-profile"&gt;&amp;#9786;&lt;/i&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mob-view"&gt;
      &lt;span class="hamburger-menu"&gt;
        &lt;button class="icon-hamburger"&gt;&lt;/button&gt;
        &lt;a href="javascript:void(0)" class="m-g-logo" title="Genpact Cora"&gt;Logo&lt;/a&gt;
        &lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="mdl-layout__obfuscator"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>