Bootstrap 3 vertical navbar responsive

Question

I have made vertical navbar with fixed height but it did not become collapsible in responsive site and some pages I am not using navbar but keeping left column 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 for is when it comes on mobile phone and ipad, left column should become hidden and if it has navbar then 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) {

 }

My CSS reference in this way

<meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" /> 
<link href="css/style.css" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />


@media only screen and (min-device-width : 320px){
  .leftNav {
    display: none;
  }
} 

Answer 1

use @media only screen and (min-device-width : 320px) in order to only target phones and tablets (not desktop):

@media only screen and (min-device-width : 320px) { .leftNav{ display:none; } }

And prefere display:none; rather than height:0px; min-height:0px;

---

Update :

@media only screen and (max-device-width : 320px) {
    .leftNav{
        display:none;
    }
}