title: trying to place a bottom bar along side with a responsive sidebar
body: <p>I have been trying to build a website layout with a responsive sidebar and a bottom navbar --both of which have a fixed position--</p>
  <p>I want the bottom navbar to get pushed and resized by the sidebar in wider viewports.</p>
  <p>I have tried using flexbox utility in css and bootstrap , but that didn't solve anything. I had the position property of the bottom navbar set to absolute and i wrapped it in a container with the maion content of the page, but that also didn't work</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        var sideBarOpen = false;
          function openNav(){
              document.getElementById("sideNav").style.width = "250px";
              // document.getElementById("main").style.marginLeft = "250px";
              // document.getElementById("main").style.opacity = "0.1";
              document.getElementById("main").style.filter = "blur(2px)";
              sideBarOpen = true;
          }
          function closeNav(){
              document.getElementById("sideNav").style.width = "0";
              // document.getElementById("main").style.marginLeft = "0";
              // document.getElementById("main").style.opacity = "1";
              document.getElementById("main").style.filter = "blur(0)";
              sideBarOpen = false;
          }
          
  
          $( document ).click(function( event ) {
          var target = $( event.target );
          
          if(!target.is("#sideNav") &amp;&amp; !$("#sideNav").has(event.target).length &amp;&amp; !target.is(".sidebar-toggle") &amp;&amp; sideBarOpen){
              closeNav();
              }else if(target.is(".sidebar-toggle")){
                  openNav();
              } 
          });
  
          // $("body").click(function (e) { 
              
          // });
    </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      html{
              height: 100%;
              width: 100%;
              margin: 0;
          }
          body{
              width: 100%;
              height: 100%;
              margin: 0;
              font-family: "Lato", sans-serif;
          }
  
          /* .wrapper {
              height: 100%;
              width: 100%;
              margin: 0;
          }
          .container{
              min-height: 100vh;
              min-width: 100vh;
              margin: 0;
              transition: .2s;
          } */
          /* .container {
              margin: 270px;
              transition: .2s;
          } */
  
          .side-nav {
              width: auto;
              min-width: 270px; 
              /* min-height: 100vh; */
              height: 100%;
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: #111;
              overflow-x:hidden ;
              padding-top: 60px;
              transition: 0.2s;
          }
          .side-nav a {
              padding: 8px 8px 8px 32px;
              text-decoration: none;
              font-size: 25px;
              color: #818181;
              display: block;
              transition: 0.3s;
          }
  
          .side-nav a:hover {
              color: #f1f1f1;
          }
  
          .side-nav .close-btn {
              position: absolute;
              border: none;
              color: white;
              padding: 15px 32px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              cursor: pointer;
              background-color: inherit;
              top: 0;
              right: 25px;
              font-size: 36px;
              margin-left: 50px;
              display: none;
          }
  
          #main {
              padding: 20px;
              width: 100%;
              margin-left: 270px;
              transition: all .2s;
          }
  
          .bottom-nav{
              position: fixed;
              display: flex;
              justify-content:space-evenly;
              align-content:stretch;
              background-color: #0080ffd7;
              width: 100%;
              bottom: 0;
              margin: 0;
              /* max-width: inherit;
              min-width: inherit; */
              overflow: auto;
              /* text-align: center; */
          }
          .bottom-nav a{
              float: left;
              width: 100%;
              text-align: center;
              padding: 12px 0;
              transition: all 0.3 ease;
              color: azure;
              font-size: 25px;
              text-decoration: none;
              border: none;
              box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
              outline: 1px solid;
              outline-color: #6eaec280;
              outline-offset: 0px;
              text-shadow: none;
              transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
          }
          .sidebar-toggle{
              display: none;
              transition: .1s;
          }
  
          .bottom-nav span{
              color: azure;
              font-size: 15px;
              display: block;
          }
  
          .bottom-nav i{
              color: azure;
              font-size: 25px;
              display: block;
          }
  
          .bottom-nav a:hover{
              background-color: #4355aa;
              border: 1px solid;
              border-color:#6eaec280;
              box-shadow: inset 0 0 20px hsla(241, 49%, 55%, 0.5), 0 0 20px rgba(58, 174, 219, 0.2);
              outline-color: rgba(199, 42, 42, 0);
              outline-offset: 15px;
              text-shadow: 1px 1px 2px #427388; 
          }
          a.active {
              background-color:#af684c ;
          }
  
  
          @media screen and (max-height:450px){
              .sidenav {padding-top: 15px;}
              .sidenav a {font-size: 18px;}
          }
  
          @media screen and (max-width: 992px){
              .side-nav{
                  width: 0;
                  min-width: 0;
                  min-height: 0;
              }
  
              #main {
                  margin: 0;
              }
              /* .container {
                  min-height: 100vh;
                  min-width: 100vh;
                  margin: 0;
              } */
              .bottom-nav{
                  margin: 0;
              }
              .sidebar-toggle{
                  display: inline;
              }
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;title&gt;UI look&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  
  
          &lt;div class="side-nav" id="sideNav"&gt;
              &lt;span class="close-btn" onclick="closeNav()"&gt;&amp;times; &lt;/span&gt;
              &lt;div&gt;
                  &lt;section&gt;
                      &lt;h3&gt;Services&lt;/h3&gt;
                      &lt;a href="#"&gt;Home&lt;/a&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;
                  &lt;/section&gt;
                  &lt;section&gt;
                      &lt;h3&gt;Account&lt;/h3&gt;
                      &lt;a href="#"&gt;Login&lt;/a&gt;
                      &lt;a href="#"&gt;Register&lt;/a&gt;
                  &lt;/section&gt;
              &lt;/div&gt;
      
              &lt;div class="list-group list-group-flush"&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Dashboard&lt;/a&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Shortcuts&lt;/a&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Overview&lt;/a&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Events&lt;/a&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Profile&lt;/a&gt;
                &lt;a href="#" class="list-group-item list-group-item-action bg-dark"&gt;Status&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;div id="main"&gt;
                  &lt;span class="sidebar-toggle" style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis doloremque, natus cum nulla quos, aperiam id non enim, quo incidunt alias. Tempore mollitia incidunt asperiores dignissimos accusamus ducimus expedita excepturi!&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio dolorum tenetur corrupti eum sunt ut excepturi tempora magnam, quisquam doloribus, error veritatis possimus quidem saepe. Error totam facilis quod harum!&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid aliquam veritatis, esse necessitatibus neque officia, error iste ipsum non recusandae praesentium odit fugiat atque, eveniet dignissimos! Earum dolore voluptates iure.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="bottom-nav" id="bottomNav"&gt;
                  &lt;a href="#" class="active"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;span&gt;main&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="fas fa-bell"&gt;&lt;/i&gt;&lt;span&gt;notifications&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;i class="fas fa-question"&gt;&lt;/i&gt;&lt;span&gt;help&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
     
      
    
  
  
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.3/umd/popper.min.js" integrity="sha512-53CQcu9ciJDlqhK7UD8dZZ+TF2PFGZrOngEYM/8qucuQba+a+BXOIRsp9PoMNJI3ZeLMVNIxIfZLbG/CdHI5PA==" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
        
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>