Meta tag is affecting the animated bootstrap icon-bar not show, but when I remove, it didn't hide the side bar when on mobile respoinsive

See more:

CSS

HTML

bootstrap

javascript - meta tag is affecting the animated bootstrap icon-bar not show, but when I remove, it didn't hide the side bar when on mobile respoinsive - Stack Overflow[^]

Hi I have problem show the icon-bar in my main page as show in the following below:

What I have tried:

Top nav bar:

<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 and metal tag:

<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;
  }
}

I have know where is the problem but when i remove this link:

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

the the icon bar show but the side bar does not hide in mobile. Is there any ways that bootstrap icon-bar will able to show and hide the sidebar when on mobile screen. Sorry if i unable to post it on jsfiddle because there a lot of link on css and js.

Could anyone help me on this, thanks.