<nav class="my-main-nav navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Toggler/collapsible Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="my-nav collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
      <!-- Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          About Us
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Meetings meetings meetings</a>
          <a class="dropdown-item" href="#">Subscriptions</a>
          <a class="dropdown-item" href="#">History</a>
        </div>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
    </ul>
  </div>
</nav>
<header class="my-header fluid-container">
  <h1>My site starts here</h1>
  <!-- Brand -->
  <a class="navbar-brand" href="/Default.aspx">
    <img id="logo" alt="Logo" src="https://picsum.photos/id/1027/100/50">
    <span>Logo Name</span>
  </a>
</header>
<main class="my-container fluid-container">
  <div class="row">
    <div class="col">
      <h2>Main Stuff here</h2>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>
      <p>Some stuff to scroll</p>

    </div>
  </div>
</main>
<footer class="main-footer fluid-container">
  <div class="row">
    <div class="col">FooterStuff here</div>
  </div>

</footer>
/* Forum question answer only :

https://www.sitepoint.com/community/t/fixed-static-sidebar-and-menu-help-bootstrap/374704

*/

/* Hide nav by default and show hamburger*/
.navbar-expand-md .navbar-collapse {
  display: none !important;
  /* important needed as bootstrap use !important to show it*/
}
.navbar-expand-md .navbar-toggler {
  display: block;
}
.my-nav.collapse {
  display: block !important;
}
.my-main-nav {
  position: fixed;
  display: block;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  overflow: auto;
  padding: 0.5rem;
  width: 4.6rem;
  z-index: 100;
  border: 1px solid #000;
}

/* make room for fixed hamburger column*/
body {
  padding-left: 6rem;
}

.my-nav {
  position: fixed;
  display: block !important;
  left: 5rem;
  top: 0;
  bottom: 0;
  height: 100vh !important;
  overflow: auto;
  padding: 10px;
  width: 300px;
  z-index: -1;
  border: 1px solid red;
  background: #343a40;
  pointer-events: none;
  opacity: 1;
  transform: translateX(-380px); /* must be wider than menu*/
  transition: all 0.3s ease;
}

.my-nav.collapse.show {
  pointer-events: initial;
  opacity: 1;
  transform: translateX(0);
  z-index: 100;
}

/* top level*/
.my-main-nav .navbar-nav > li > a {
  padding: 10px 0 0 0;
}
/* dropdown item */
.my-main-nav .navbar-nav a.dropdown-item {
  padding: 5px 10px;
}
.navbar-collapse {
  padding-top: 25px;
}

.my-main-nav.navbar-expand-md .navbar-nav {
  flex-direction: column;
}

/* sticky header */
.my-header {
  position: -webkit-sticky;
  position: sticky;
  z-index: 99;
  top: 0;
  display: flex;
  justify-content: space-between;
  background: #000;
  color: #fff;
  padding: 5px 15px;
}
.my-container,
.main-footer {
  border: 1px solid #000;
  margin-top: 1rem;
  background: #ccc;
  padding: 15px;
}
.main-footer {
  background: #ddd;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
main.my-container {
  flex: 1 0 0;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js