Is there a way to reproduce content slide?

I'm trying to reproduce the effect of content sliding onto the header section (under the navbar) with the stamp included when the menu buttons are clicked. Is there a way to do this with MDB? Ta!

Expected behavior https://www.clairefitzpatrick.net

Actual behavior N/A

Resources (screenshots, code snippets etc.) Current Code for Body:

        <!-- Navbar brand -->
        <span class="navbar-text white-text" style="max-width: 50%;">
        <h1 class="h1-responsive">CLAIRE FITZPATRICK</h1>
        <h3 class="h3-responsive">AUSTRALIAN SHADOWS AWARD-WINNING AUTHOR OF SPECULATIVE FICTION AND NON-FICTION</h3>
        </span>
        <!-- Navbar brand -->

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

        <!-- Collapsible content -->
      <div class="collapse navbar-collapse flex-column" id="navbarSupportedContent">
          <span class="navbar-text white-text">
          <!-- Links -->
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#" style="font-size: 1.5em;">home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" style="font-size: 1.5em;">about</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#" style="font-size: 1.5em;">fiction</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="#" style="font-size: 1.5em;">non-fiction</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="#" style="font-size: 1.5em;">reviews</a>
          </li>
        </ul><!-- Links -->
          </span>
      </div><!-- Collapsible content -->
    </div><!--Container-->

  </nav><!--Navbar-->

<!--Main Layout-->
    <main class="text-center py-5 mt-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <img src="img/custom/Australian-Shadows-Awards-2017.png" class="img-fluid float-left" id="stamp" alt="australia horror award stamp">
                </div>
            </div>
        </div>
    </main>
<!--Main Layout-->