Мета-тег влияет на анимированную иконку bootstrap-бар не отображается, но когда я удаляю, он не скрывает боковую панель, когда на мобильном respoinsive

---

javascript - meta tag влияет на анимированный значок bootstrap-панель не отображается, но когда я удаляю, она не скрывает боковую панель, когда на мобильном устройстве respoinsive - Stack Overflow[^]

Привет, у меня есть проблема Показать панель значков на моей главной странице, как показано ниже:

Что я уже пробовал:

Верхняя навигационная панель:

<nav class=" navbar navbar-default navbar-fixed-top my-class" role="navigation">
    <div class="container-fluid">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="sidebarCollapse">
            <span class="icon-bar top-bar"></span> 
            <span class="icon-bar middle-bar"></span> 
            <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{Project name}</a>
        <div id="navbar" class="navbar-collapse collapse"></div>
    </div>
</nav>

css js и металлическая бирка:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Dashboard by Bootstrapious.com</title></meta>
<meta name="description" content=""></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="robots" content="all,follow"></meta>

<title>Collapsible sidebar using Bootstrap 3</title>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css"></link>
<!-- Font Awesome CSS--> 
<link rel="stylesheet" href="resources/vendor/font-awesome/css/font-awesome.min.css"></link>
<!-- Fontastic Custom icon font--> 
<link rel="stylesheet" href="resources/css/fontastic.css"></link>
<!-- Google fonts - Roboto --> 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"></link>
<!-- jQuery Circle--> 
<link rel="stylesheet" href="resources/css/grasp_mobile_progress_circle-1.0.0.min.css"></link>
<!-- Custom Scrollbar -->
<link rel="stylesheet" href="resources/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS:

@media only screen and (max-width: 1023px) {
  .navbar-toggle .icon-bar{ background-color: #fff;}  
  
  .my-class{
    visibility: visible;
  }

  .navbar {
    background-color: #34454e;
  }

  .my-class.navbar-default .navbar-brand {
    font-family: monaco, Consolas, "Lucida Console", monospace;
    font-size: 24px;
    font-weight: 500;
    color: #dcdcdc;
  }

  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-collapse.collapse.in {
    display: block !important;
  }
  .navbar-header .collapse,
  .navbar-toggle {
    display: block !important;
  }

  .navbar-toggle {
    border: none;
    //background: transparent !important;
    border: 0;
    float: left;
    padding: 18px;
    margin: 0;
    border-radius: 0;
    background-color: #e2ae15;
    cursor: pointer;
    color: #ffffff;*/

    &:hover {
    /*background: transparent !important;*/
    background: #e2ae15 !important;
  }

    .icon-bar {
      width: 22px;
      transition: all 0.2s ease-in-out;
    }
    .top-bar {
      transform: rotate(45deg);
      transform-origin: 10% 10%;
    }
    .middle-bar {
      opacity: 0;
    }
    .bottom-bar {
      transform: rotate(-45deg);
      transform-origin: 10% 90%;
    }

   &.collapsed {
      .top-bar {
        transform: rotate(0);
      }
      .middle-bar {
        opacity: 1;
      }
      .bottom-bar {
        transform: rotate(0);
      }
    }
  }

  .my-class.navbar-default .navbar-toggle,
  .my-class.navbar-default .navbar-toggle:hover {
    background-color: red;
  }

  .my-class .navbar-toggle.collapsed,
  .my-class .navbar-toggle.collapsed:hover {
    background-color: orange;
  }
}

@media only screen and (min-width: 1024px)
{
  .my-class, #navba{
    visibility: hidden;
  }
}

Я знаю, в чем проблема, но когда я удаляю эту ссылку:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta> 

панель значков отображается, но боковая панель не скрывается в мобильном телефоне. Есть ли какие-либо способы, с помощью которых bootstrap icon-bar сможет показывать и скрывать боковую панель на экране мобильного устройства? Извините, если я не могу разместить его на jsfiddle, потому что там много ссылок на css и js.

Может ли кто-нибудь помочь мне в этом, спасибо.

---