Bootstrap collapsing div which hides by default under certain width

Question

Codepen: https://codepen.io/sahandz/pen/zRzoEP

I'm trying to create a sidebar that collapses at max-width 766 px, and a hamburger button that makes it visible again onclick.

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/base.css">

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<div class="container-fluid">
    <div class="topdiv">
      <h1>Dinner Planner</h1>
    </div>
    <div class="row dish-item-view">
      <button type="button" data-toggle="collapse" data-target="#sidebar" id="hamburger">
        <i class="fas fa-bars"></i>  
      </button>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar" id="sidebar">
        <div>
          <div class="noofpeople">
            <div class="row noofpeople-wrapper">
              <h4>My Dinner</h4>
              <label>People <input type="number" class="form-control"></label> 
            </div>
          </div>
          <div class="dinneroverview">
            <div class="dish-overview-header">
              <span class="dish-name">Dish name</span><span class="cost">Cost</span>
            </div>
            <div class="price">
              <span id="pricetag">SEK 0.00</span>
            </div>
            <div class="confirm">
              <button type="button" class="btn btn-default">Confirm Dinner</button>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 main-bar">
        <div class="row dishsearch">
          <h4>Find a Dish</h4>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
            <input type="text" class="form-control" value="Enter keyword"> 
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-padding">
            <select class="form-control">
            </select>
        </div>
          <button type="button" class="btn btn-default">search</button>
        </div>
        <div class="row dishreel">

        </div>
      </div>
    </div>

    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

    <!-- The application JavaScript code -->
    <script src="js/app.js"></script>
    <script src="js/model/dinnerModel.js"></script>
    <script src="js/view/sidebarView.js"></script>

CSS:

@media (min-width:767px){
  #hamburger{
    display:none;
  }
  .sidebar{
    height:100%;
    border-style:solid;
    display:block;
  }
  .collapse{
    display:block;
  }
}
@media (max-width:766px){
  .sidebar{
    display:none;
  }
}
.dish-item-view{
    height:100vh;
}

I'm running into two main problems:

1. When making the window width small (which collapses the sidebar) and then clicking the button once to make it pop up again (this time not as a sidebar but as a row at the top of the page), everything works fine. But when I enlarge the window again (with the sidebar expanded/visible) the sidebar has lost its full height and only takes up its own height, not the full height of the page like before.

2. (Reload the page). Make the window width small again, then click on the hamburger button to make the sidebar visible, and then click on it again to hide it once more. If you now enlarge the page, you will see that the sidebar does not become visible/expand again. It should.

How can I fix this? I've tried all sorts of CSS rules but it seems like I can't make bootstrap work for me in a good way. I would like to avoid having to write this myself in javascript since I want to learn to use existing libraries.

Answer 1

Adding !important to some of the CSS rules did the trick:

new CSS:

@media (min-width:767px){
  #hamburger{
    display:none;
  }
  .sidebar{
    height:100% !important;
    border-style:solid;
    display:block !important;
  }
  .collapse{
    display:block;
  }
}
@media (max-width:766px){
  .sidebar{
    display:none;
  }
}
.dish-item-view{
    height:100vh;
}

The reason this works is that bootstrap injects css into the html when clicking the hamburger-button which overrides other rules on the element, unless !important is used. Also,