Provide support for a fixed header navbar

Problem/Motivation

I am wanting to enable a fixed navbar on mobile versions of my site.

Using the css below I am able to affix the header, but at mobile screen sizes the off canvass menu for the main navigation does not work properly. A small part of the mobile menu appears briefly and then disappears.

// Bootstrap navbar mods
@media (max-width: 767px) {
  body {
    margin-top: 50px;
  }
  .header {
    background: white;
    position: fixed;
    z-index: 2000; //this value is from variables.less -> @zindex-navbar-fixed
    right: 0;
    left: 0;
    border-radius: 0;
    top: 0;
    border-width: 0 0 1px;
  }
}

Please view a link below to view a short video
https://nimb.ws/4r0p8z

Any thoughts about what I am missing? A working scss snippet would be be most helpful.