boot strap 3.3.4 nav bar collpase

Question

I am trying to collpase navbar for tablet sizes,I have used the following code:

 <nav class="navbar navbar-default navbar-custom" style="background-color: white; border: none; margin-top: 10px;" role="navigation">
     <div class="container-fluid">    
         <div class="navbar-header">    
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>    
          </div>    
          <div class="collapse navbar-collapse  navbar-custom" id="myNavbar">
              <ul class="nav navbar-nav">
                  <li class="button hvr-sweep-to-bottom "><a href="About.aspx">Home</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 1</a></li>    
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 2</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 3</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 4</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 5</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 6</a></li>    
              </ul>    
          </div>

My navbar does collpase for mobile devices and working perfectly for mobile,the problem is I am using a class called .custom-navbar to customize the standard navbar and trying to figure out how to collpase it for mobile devices say 1199px, I am trying to work around this code to get my desired result

@media screen and (max-width:1000px){


    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
     .navbar-collapse.collapse.in {
        display: none!important;
    }
}

Working example :

@media screen and (max-width:1000px){


    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
     .navbar-collapse.collapse.in {
        display: none!important;
    }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-custom" style="background-color: white; border: none; margin-top: 10px;" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse  navbar-custom" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="button hvr-sweep-to-bottom "><a href="About.aspx">Home</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 1</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 2</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 3</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 4</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 5</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 6</a></li>
      </ul>
    </div>