title: How can I get a transparent Bootstrap navbar in the WordPress header.php with an image underneath?
body: <p>I have a code layout question for Bootstrap and WordPress. So basically I want to accomplish this Bootstrap transparent nav look but inside the WordPress template hierarchy structure..</p>
  
  <p><a href="https://i.stack.imgur.com/rKFU4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rKFU4.jpg" alt="Screenshot"></a></p>
  
  <p>Header.php contains the navigation that every page will have in a WordPress theme. Right now to get this look, I have the Bootstrap jumbotron class div wrapped around the nav which works great for a regular website. </p>
  
  <p>The <strong>issue</strong> is that I don't think this will work in WordPress because the nav code will need to be separate in the header.php file and the jumbotron image only needs to be on the homepage. <strong>Any suggestions on how I can do this?</strong></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>.jumbotron {
  position: relative;
  background: url("http://kriswhitewrites.com/wp-content/uploads/2013/06/landscape-mountains-snow-sky.jpg") center center;
  background-size: cover;
  width: 100%;
  min-height: 550px;
  overflow: hidden;
  }
  
  
  
    .navbar {
        background-color: transparent;
        background: transparent;
      }
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jumbotron"&gt;
  
            &lt;nav class="navbar navbar-customnav"&gt;
              &lt;div class="container-fluid"&gt;
                &lt;div class="navbar-header"&gt;
                  &lt;a class="navbar-brand" href="#"&gt;WebSiteName&lt;/a&gt;
                &lt;/div&gt;
                &lt;ul class="nav navbar-custom"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
  
  
            &lt;div class="container"&gt;
                &lt;h3&gt;Search for jobs&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;&lt;!--End of Jumbotron--&gt;</code></pre>
  </div>
  </div>
  </p>