Burger menu bootstrap

Bonjour,

je cherche a crée un burgerMenu de type collapse (qui déroule une div a l'appui )
j'ai donc crée une nav bar invisible en mode sticky-top avec un .gif en guise de bouton.

mon .gif me sert de bouton "collapse" c'est bien pratique mais malheureusement la div que ce dernier fait apparaître "pousse" le contenue. hors moi je voudrais que cette div ce superpose au reste sans rien modifié ... quelques bon conseils ?

voila j’espère avoir était le plus clair possible .
et voila mon bout de code simplifié a mort bien entendue :

<nav class="navbar sticky-top navbar-light bg-faded">
            <a class="btn" data-toggle="collapse" href="#collapseExample" rel="nofollow noopener noreferrer" target="_blank" aria-expanded="false" aria-controls="collapseExample">
              <img href="#" src="images/menu.gif" class="burger rounded-circle">
            </a>
        </nav>

        <div class="collapse" id="collapseExample">
          <div class="card card-block">
              <p>le contenue qui doit normalement ce superposé au reste</p>
          </div>
        </div>

.burger {
  width: 40px;
  height: 40px;
opacity: 0.3;
}
.burger:hover {
width: 40px;
height: 40px;
opacity: 1;
}

merci les pros !!