title: How to bring navigation div to the front
body: <p>i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements.
  any help with this matter will be greatly appreciated, below is all the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Segoe UI';
  }
  p,
  h5 {
    margin-bottom: 10px;
    line-height: 1.5;
  }
  h5 {
    text-align: center;
    border: 1px solid #ccc;
    border-width: 1px 0;
  }
  h5.fixed {
    position: fixed;
    top: 80px;
    left: 0;
    background-color: #fff;
    right: 0;
  }
  .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
  }
  .nav a:hover {
    background-color: #005f5f;
  }
  .nav a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
  }
  /* Option 1 - Display Inline */
  
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;h5&gt;
      &lt;div class="nav"&gt;
        &lt;ul&gt;
          &lt;li class="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tutorials"&gt;&lt;a class="active" href="#"&gt;Tutorials&lt;/a&gt;&lt;/li&gt;
          &lt;li class="about"&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="news"&gt;&lt;a href="#"&gt;Newsletter&lt;/a&gt;&lt;/li&gt;
          &lt;li class="contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/h5&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/fWMGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fWMGt.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/HekGM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HekGM.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Cgt7H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cgt7H.png" alt="enter image description here"></a></p>