html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

@media (max-width: 767.98px) {
  .offcanvas-collapse {
    position: relative;
    z-index: 200;
    height:0;
    width: 100%;
    padding: 0 2rem;
    overflow-y: auto;
    background-color: white;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  .offcanvas-collapse.open {
    height:100%;
    -webkit-transform: translateX(-1rem);
    transform: translateX(-1rem); /* Account for horizontal padding on navbar */
  }
}
.overlay{
  z-index:300;
}