Navbar problem

**Expected behavior**i am using a video background with a transparent navbar.on smaller devices when yu press the menu symbol it will push down the content .**Actual behavior**the navbar drop down menu is displaying over the content **Resources (screenshots, code snippets etc.)**`

<!-- Navbar brand -->
<a class="navbar-brand py-0" href="#">
  <img src="/images/1280px-NBC_Peacock_1986.svg" height="20" alt="">
 <span>The</span> Office
</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
  aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">

  <!-- Links -->
  <ul class="navbar-nav ml-auto">
    <li class="nav-item ">
      <a class="nav-link" href="#"><span>Home</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Cast</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">News</a>
    </li>
  </ul>
  <!-- Links -->

  <form class="form-inline">
    <div class="md-form my-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
    </div>
  </form>
</div>
<!-- Collapsible content -->

The Office `

.header { font-family: roboto; margin-top: 90px; } I have to give margin-top: 90px so that (so that is does not display in the navbar) but the main problem is the navbar drop down menu is displaying over the content for smaller devices . I think the problem is the fixed-top class. https://mdbootstrap.com/snippets/jquery/ross_linton/536892