Javascript Botton navigation is overlapping side nav

Question

I have a navigation bar which is located at the bottom of the screen. on the bottom navigation I have a button called Add, once clicked it will open a modal. I had to use the Z-index style so that when the modal is open It's not possible to open the Top navigation menu.

I'm trying to figure out how to stop the Bottom navigation overlapping the Top navigation side menu once it is active.

// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });


// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
  let elems = document.querySelectorAll('.modal');
  let instances = M.Modal.init(elems);
});

.nav-padding{
     margin-top: 60px;
    }

    nav { 
     position: fixed;
     z-index: 1001;
    }

    .trashbin {
      padding-right: 30px !important;
      padding-left: 30px !important;
    }


/* */

body {
    margin: 0 0 55px 0;
}

.bottom_nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 1002;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    color: #009578;
}

.nav__icon {
    font-size: 18px;
}

<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<nav class="nav-wraper black">
  <a href="" class="center brand-logo"></a>
  <ul>
    <li class="right"><a href="#" class="white-text">Sign In
      </a>
    </li>
  </ul>

  
  <!-- Side Navagation -->
  <ul id="slide-out" class="sidenav">
 <li>
<li><a><i class="material-icons">fitness_center</i>
        <p class="">Templates</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Bill</p>
      </a></li>
    <li></li>
    <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>&</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect ">
        <p>Ben</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>The</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Flower​Pot</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Men</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  

  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</nav>


<footer class="bottom_nav">

  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">dashboard</i>
    <span class="nav__text">Dashboard</span>
  </a>
  <a href="#" class="nav__link nav__link--active">
    <i class="material-icons nav__icon">person</i>
    <span class="nav__text">Profile</span>
  </a>
  
   <a href="#add_exercise_column" class="nav__link modal-trigger">
    <i class="material-icons nav__icon">add_box</i>
    <span class="nav__text">Add</span>
   </a>
   <div class="modal modal-position" id="add_exercise_column">
    <div class="valign-wrapper center-align">
      <div class="row">
        <form class="col s12 valign-wrapper center-align">
          <div class="input-field"> 
           <div class="remove_label">
            <label><h6>Add</h6></label>
           </div> 
           <div class="removebtn-padding">
            <input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
          </div> 
          </div>
        </form>
       </div>  
    </div>
   </div>
  
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">lock</i>
    <span class="nav__text">Privacy</span>
  </a>
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">settings</i>
    <span class="nav__text">Settings</span>
  </a>
</nav>
</footer>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- app.JavaScript -->
<script src="app.js"></script>

Answer 1

Probably just need to change:

z-index: 1002;

to

z-index: 1000;

and move the modal outside of the footer.

// Materialize Initialization Nav Drop Down.
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });


// ----------------Models Materialize Framework----------------
document.addEventListener('DOMContentLoaded', function() {
  let elems = document.querySelectorAll('.modal');
  let instances = M.Modal.init(elems);
  
});

.nav-padding{
     margin-top: 60px;
    }

    nav { 
     position: fixed;
     z-index: 1001;
    }

    .trashbin {
      padding-right: 30px !important;
      padding-left: 30px !important;
    }


/* */

body {
    margin: 0 0 55px 0;
}

.bottom_nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    display: flex;
    overflow-x: auto;
    z-index: 1000;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    font-size: 13px;
    color: #444444;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    color: #009578;
}

.nav__icon {
    font-size: 18px;
}

<!-- Google icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<nav class="nav-wraper black">
  <a href="" class="center brand-logo"></a>
  <ul>
    <li class="right"><a href="#" class="white-text">Sign In
      </a>
    </li>
  </ul>

  
  <!-- Side Navagation -->
  <ul id="slide-out" class="sidenav">
 <li>
<li><a><i class="material-icons">fitness_center</i>
        <p class="">Templates</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Bill</p>
      </a></li>
    <li></li>
    <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>&</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>

    <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect ">
        <p>Ben</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>The</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Flower​Pot</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
   <a href="#" class="right trashbin waves-effect"><i class="material-icons black-text">delete</i></a>
    <li><a href="#!" class="waves-effect">
        <p>Men</p>
      </a></li>
    <li>
      <div class="divider"></div>
    </li>
  
  

  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</nav>


<footer class="bottom_nav">

  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">dashboard</i>
    <span class="nav__text">Dashboard</span>
  </a>
  <a href="#" class="nav__link nav__link--active">
    <i class="material-icons nav__icon">person</i>
    <span class="nav__text">Profile</span>
  </a>
  
   <a href="#add_exercise_column" class="nav__link modal-trigger">
    <i class="material-icons nav__icon">add_box</i>
    <span class="nav__text">Add</span>
   </a>
   
  
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">lock</i>
    <span class="nav__text">Privacy</span>
  </a>
  <a href="#" class="nav__link">
    <i class="material-icons nav__icon">settings</i>
    <span class="nav__text">Settings</span>
  </a>
</nav>
</footer>
<div class="modal modal-position" id="add_exercise_column">
    <div class="valign-wrapper center-align">
      <div class="row">
        <form class="col s12 valign-wrapper center-align">
          <div class="input-field"> 
           <div class="remove_label">
            <label><h6>Add</h6></label>
           </div> 
           <div class="removebtn-padding">
            <input id="delete" class="del-exercise-btn modal-close btn black" type="submit" value="Submit">
          </div> 
          </div>
        </form>
       </div>  
    </div>
   </div>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- app.JavaScript -->
<script src="app.js"></script>