Bootstrap 3 vertical navbar responsive

I have make navbar vertical with fixed height but it did not become collapsible in responsive site and some pages I am not using navbar but keeping left col without navbar which I need disappear

below is my code

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 nopadding leftNav">
      <nav class="navbar leftmenu navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <ul class="nav nav-stacked navVerticale">
            <li class="active" id="#about"><a href="#">About Plexus</a></li>
            <li id="#vision"><a href="#">Vision & Mission</a></li>
            <li id="#objective"><a href="#">Objectives</a></li>
            <li id="#headQuaters"><a href="#">Headquaters</a></li>
            <li id="#qualityPolicy"><a href="#">Quality Policy</a></li>
            <li id="#orgChart"><a href="#">Organization Chart</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-md-9">
      <!-- Over here big text with different height-->
    </div>
  </div>
</div>

CSS

.leftmenu {background:none;padding:40px;background-repeat:no-repeat;font-family:'eurostileregular';font-size:17px;}
.leftNav {height:600px; min-height:600px;background:#808080;background-image:url('/images/arch.png');background-repeat:no-repeat;}
.nopadding {padding: 0 !important;margin: 0 !important;}
.navVerticale > li > a { color: #fff;width:100%}
.navVerticale {width:100%;text-align:right;}
.navVerticale li.active a:after,.navVerticale li:hover a:after { content:"";position:absolute;left:65%;right:0;height:1px;width:30%;border-bottom:1px solid #ad1f2d;padding-bottom:1px;display:block;}

What I am looking is when it comes on mobile phone and ipad left column should become hide and if it have navbar than should be collasped. I also tried to make responsive css as below but it become height in normal website also

 @media only screen and (min-width : 320px) {
        .leftNav{height:0px;min-height:0px;}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }