title: How do I overlay a transparent navbar over a hero image and have a functioning button on the hero image?
body: <p>I’ve set my nav bar as transparent on top of my hero image, however, the buttons on my hero image do not work.          </p>
  
  <p>The nav-bar has a z-index of 1, and my hero image, text and button has a z-index of -1. This makes the button unclickable, as it is set to be behind the navbar. </p>
  
  <p>Things I’ve tried:</p>
  
  <p>-I’ve tried to give my button a z-index of 1, but it doesn’t work </p>
  
  <p>-I’ve tried to wrap my button in a div class and set the z-index of that to 1, but it doesn’t work</p>
  
  <p>-If I reverse the z-index of the nav bar and hero image, the buttons work, however, the nav bar is set behind the image and cannot be seen. </p>
  
  <p>How do I accomplish having the nav bar on top of the hero image AND have my button clickable?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top-nav{
      font-size: 20px;
      margin-top:0em;
      margin-bottom:0em;
      font-weight:600;
      padding: 0px 32px;
      color: white !important;    
      background: transparent;
  }
  
   
  .navbar-overlay {
      position:relative;
      margin-bottom: -104px;  
      z-index: 1;  
  }
  
  .first-section-hero {    
      position: relative;
      min-height: auto;
      height:900px;
      margin-top: 0em;
      padding-bottom: 10em; 
      background-image:url("{% static 'img/yellow_swoosh.svg' %}");  
       background-position: center center; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;
      background-repeat:no-repeat;
      z-index: -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="top-nav "&gt;
      &lt;div class= navbar-overlay &gt;
          &lt;nav class="navbar navbar-expand-lg navbar-dark "&gt;
              &lt;a class="navbar-brand"  href="{{ home_url }}"&gt;Name&lt;/a&gt;
                  &lt;div class="collapse  navbar-collapse " id="navbarText"&gt;
                  &lt;ul class="navbar-nav mx-auto"&gt;
                      &lt;li class="nav-item  "&gt;
                          &lt;a class="nav-link" href="/articles"&gt;Resources&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="/features"&gt;Features&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="/about"&gt;About &lt;/a&gt;
                      &lt;/li&gt; 
                  &lt;/ul&gt;
              &lt;/div&gt;     
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="first-section-hero" &gt; 
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-12 col-xs-12 "&gt;
                  &lt;h1&gt;TITLE&lt;/h1&gt;
                  &lt;a href="#" class="btn btn-default btn-xl"&gt;FIND OUT MORE&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>