===============================================
<style>
#ColCategoryBar {
position: static;
vertical-align: top;
}
#ColCategoryBox {
width: 100%;
height: 100%;
border: 0;
padding: 0 10px 0 10px;
display: inline-block;
vertical-align: top;
overflow-y: auto;
}
#ColEmpty {
display: none;
overflow-y: hidden
}
@media all and (min-width:993px) {
#ColCategoryBar {
display: inline-block
}
#SliderButton {
display: none
}
}
@media all and (max-width:992px) {
#ColCategoryBar {
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
position: fixed;
z-index: 1001;
background-color: rgba(190,190,190,0.6);
}
#ColCategoryBox {
width: 80%;
display: inline-block;
overflow-y: auto;
background-color: #fff;
border: 1px solid #000;
vertical-align: top;
}
#ColEmpty {
width: 17%;
height: 100%;
display: inline-block;
vertical-align: top
}
#SliderButton {
display: inline;
}
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ColCategoryBar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container" >
<div class="row">
<div id="ColCategoryBar" class="col-lg-2 collapse">
<div id="ColCategoryBox" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="ColEmpty" data-toggle="collapse" data-target="#ColCategoryBar">
</div>
</div>
<div class="col-lg-10" >
content
</div>
</div>
</div>
<div id="SliderButton" style="position:fixed;z-index:99;bottom:5px;right:3%">
<button type="button" data-toggle="collapse" data-target="#ColCategoryBar" >
<span> menu </span>
</button>
</div>