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-->