Burger navbar doesn't work with fixed position

Question

I have a Bootstrap menu, I use the position: fixed to not scroll the menu, for small display, the burger menu doesn't work, when I delete position: fixed, it works but the menu is scrolled with the page content :

My HTML:

 <div class="col-sm-2">
            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse sidebar-navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Menu Item 1</a></li>
                            <li><a href="#">ITERM1</a></li>
                            <li><a href="#">ITEM2</a></li>
                            <li><a href="#">ITEM3</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="col-sm-10">
           content blabla
        </div>

My CSS :

.navbar-default {
    position: fixed;
}

Answer 1

Please check the example code here CODEPEN

HTML:

<div class="col-sm-12">
  <div class="sidebar-nav">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
      </div>
      <div class="navbar-collapse collapse sidebar-navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Menu Item 1</a></li>
          <li><a href="#">ITERM1</a></li>
          <li><a href="#">ITEM2</a></li>
          <li><a href="#">ITEM3</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
</div>
<div class="col-sm-10">
  content blabla
</div>
</div>