Fixed bottom class on an item on the page is making sidenav

<main> <header> <!-- Sidebar navigation --> <ul id="slide-out" class="side-nav bg-white custom-scrollbar"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="assets/img/wow/" class="img-fluid flex-center"></a> </div> </li> <br> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li><a class="collapsible-header waves-effect arrow-r black-text"><i class="fa fa-user-circle-o"></i> Profile <i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="#!" class="waves-effect black-text"><i class="fa fa-eye"></i>View Profile</a></li> <li><a href="#!" class="waves-effect black-text"><i class="fa fa-sign-out"></i>Sign Out</a></li> </ul> </div> </li> <li><a href="#!" class="waves-effect black-text"><i class="fa fa-music"></i> Audio</a></li> <li><a href="messages.php" class="waves-effect black-text"><i class="fa fa-audio-description"></i> Messages </a></li> <li><a class="collapsible-header waves-effect arrow-r black-text"><i class="fa fa-gears"></i> Settings </a></li> <li><a href="#!" class="collapsible-header waves-effect arrow-r black-text"><i class="fa fa-info"></i> About Us </a></li> <li><a href="#!" class="collapsible-header waves-effect arrow-r black-text"><i class="fa fa-file"></i> Licence Info </a></li> <!--Social--> <li> <ul class="social fixed-bottom"> <li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook blue-text"> </i></a></li> <li><a href="#" class="icons-sm li-ic"><i class="fa fa-linkedin light-blue-text"> </i></a></li> <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus red-text"> </i></a></li> <li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter blue-text"> </i></a></li> </ul> </li> </ul> </li> <!--/. Side navigation links --> <div class="sidenav-bg mask-strong"></div> </ul> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav" id="scrolling-navbar" style="background-color: #fff;"> <!-- SideNav slide-out button --> <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse black-text" style="margin-left: -2px"><i class="fa fa-bars"></i></a> </div> <!-- Breadcrumb--> <ol class="breadcrumb hidden-lg-down"> <li class="breadcrumb-item active"> <strong class="black-text"> Audio Player </strong></li> </ol> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a href="#" id="butRefresh" class="nav-link black-text"><i class="fa fa-search" aria-label="Refresh"></i> <span class="clearfix d-none d-sm-inline-block"></span></a> </li> <li class="nav-item"> <a href="#!" class="nav-link black-text"><i class="fa fa-ellipsis-v" aria-label="Add"></i> <span class="clearfix d-none d-sm-inline-block"> </span></a> </li> </ul> </nav> </header> <br><br><br> <div class="container-fluid"> <!-- First row --> <div class="row row1"> <div class="col-lg-12"> <div class="card"> <div class="card-block"> <div class="card-body"> <div class="media"> <img class="d-flex mr-3" src="assets/img/wow/music-player.png" style="width: 50px; height: 50px" alt="Generic placeholder image"> <div class="media-body"> <h4 class="mt-0 font-bold h4-responsive">Mali Music</h4> <h5 class="h5-responsive blue-text">The Transition of Mali</h5> </div> </div> </div> <div class="card-footer"> <ul id="playlist"> <li class="current-song"> <a href="01%20-%20Bow%20Out.mp3">01 - Bow Out</a> </li> <hr> <li> <a href="02%20-%20Gonna%20Be%20Alright.mp3">02 - Gonna Be Alright</a> </li> <hr> <li> <a href="07%20-%20Contradiction.mp3">03 - Contradiction</a> </li> </ul> </div> </div> </div> </div> </div> <div class="row fixed-bottom"> <div class="col-lg-12"> <div class="card" id="card-audioPlayer"> <div class="card-block"> <div class="card-body"> <audio class="embed-responsive-item" src="" controls id="audioPlayer"> </audio> </div> </div> </div> </div> </div> </div></main>

This makes the sidenav go behind the card-audioPlayer anytime button toggles sidenav to show up. Anyidea how to make the sidenav go on top of the card-audioPlayer???