addСlass и removeСlass при ресайзе окна

[antegria]

Необходимо было реализовать два типа меню на странице для разных разрешений экранов. Написала скрипт, который присваивает и убирает у элементов этого меню соответствующие классы. Посмотреть как это выглядит можно здесь - http://study.uitschool.com/fe-18-03/makarova/news-test/ .

Проблема заключается в том, на границе <1200 px, левое меню "улетает" в панель - это видно невооруженным взглядом, а моих знаний пока недостаточно, чтобы исправить это самостоятельно. Кроме того, появляется еще одна проблема: с 1196 px по 1199 px можно наблюдать следующее: https://drive.google.com/open?id=1pp...UrRFwp20ecql7e

Мой код:

<div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <ul class="over-ul">
            <li><a href="#">Главная</a></li>
            <li><a href="#">События</a></li>
            <li><a href="#">Город</a></li>
            <li><a href="#">Мнения</a></li>
            <li class="active"><a href="#">Происшествия</a></li>
            <li><a href="#">Общество</a></li>
            <li><a href="#">Технологии</a></li>
            <li><a href="#">Украина</a></li>
            <li><a href="#">Мир</a></li>
            <li><a href="#">Здоровье</a></li>
            <li><a href="#">Политика</a></li>
            <li><a href="#">Спорт</a></li>
            <li class="detached"><br><a href="#">Организации</a></li>
            <li class="detached"><a href="#">Персоны</a></li>
            <li class="detached"><a href="#">События</a></li>
            <li class="detached"><a href="#">Контакты</a></li>
            <li class="detached"><a href="#">Реклама на сайте</a></li>
        </ul>
  </div>
</div>
панель, видна только на маленьких экранах
<div class="container-fluid">
      <div class="col-xs-12 openbar">
          <img src="images/logo.png" alt="logo">
          <span onclick="openNav()">&#9776;</span>
      </div>
  </div>

CSS

.navbar-fixed-left {
  width: 198px;
  position: fixed;
  border-radius: 0;
  height: 100%;
}
.navbar-fixed-left>div>.navbar-nav > li {
  float: none;
  width: 197px;
}
.navbar-fixed-left + .container {
  padding-left: 160px;
}
.navbar{
    background: #1e4570;
}
.navbar{
    background: #1e4570;
}
.navbar-brand{
    padding: 20px 25px 20px 15px;
    height: 88px;
    background: rgba(0, 0, 0, 0.05);
    margin-bottom: 7px;
}
.navbar-fixed-left>div>ul>li>a{
    color: #fff;
    padding: 10px 15px 10px 27px;
    font-size: 18px;
}
.navbar-fixed-left>div>ul>li{
    background: #1e4570;
}
li.active>a{
    font-weight: bold;
}
.navbar-fixed-left>div>ul>.detached>a{
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 15px 0 27px
}
.nav>li>a:focus, .nav>li>a:hover{
    background: none;
    outline: none;
}

Скрипт:

<script>
function openNav() {
 document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
 document.getElementById("myNav").style.height = "0%";
}
    // Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 1180) {
        $('#myNav').addClass('navbar navbar-fixed-left').removeClass('overlay');
        $('#myNav>div').removeClass('overlay-content');
        $('#myNav>div>ul').addClass('nav navbar-nav').removeClass('over-ul');
    } else {
        $('#myNav').addClass('overlay').removeClass('navbar navbar-fixed-left');
        $('#myNav>div').addClass('overlay-content');
        $('#myNav>div>ul').addClass('over-ul').removeClass('nav navbar-nav');
    }
}
// Fire.
screenClass();
// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});
</script>