title: Top navigation that's set as fixed on top not behaving correctly
body: <p>I set the top navigation bar as being sticky on top, but it's acting weird in some places.
  Here's the fiddle link <a href="https://jsfiddle.net/benjaminana77/pugek2f8/30/" rel="nofollow noreferrer">https://jsfiddle.net/benjaminana77/pugek2f8/30/</a> and I reproduced code below.</p>
  <p>I'm having problems in three places</p>
  <ol>
  <li>In the hero image section, top nav background is incorrectly being transparent. I set the background color as white, not transparent.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/y0e6b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y0e6b.png" alt="enter image description here" /></a></p>
  <ol start="2">
  <li>The top nav bar incorrectly shows BEHIND a slider, not above the slider.</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/8WgpN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WgpN.png" alt="enter image description here" /></a></p>
  <ol start="3">
  <li>When you hover over an item in the grid layout, the item shows above the top nav bar.</li>
  </ol>
  <p>normal state:
  <a href="https://i.stack.imgur.com/ZeTe0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZeTe0.png" alt="enter image description here" /></a></p>
  <p>when you hover over an image:
  <a href="https://i.stack.imgur.com/DK50x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DK50x.png" alt="enter image description here" /></a></p>
  <p>Many thanks in advance!</p>
  <p>HTML:
  
  
  </p>
  <pre><code>&lt;div class=&quot;boxA&quot;&gt;
  
  &lt;div class=&quot;box1&quot;&gt;
    &lt;div class=&quot;site&quot;&gt;
      &lt;a href=&quot;&quot;&gt;&lt;img src=&quot;img/logo.png&quot;&gt;&lt;/a&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div class=&quot;box2&quot;&gt;
  &lt;nav class=&quot;menu&quot;&gt; 
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#conD&quot;&gt;menu1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#conG&quot;&gt;menu2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#conH&quot;&gt;menu3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#conI&quot;&gt;menu4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;div class=&quot;body-part&quot;&gt;
  
  &lt;section class=&quot;conA&quot;&gt;
  &lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;heroText&quot;&gt;
       &lt;p&gt;Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit&lt;/p&gt;
      &lt;div id=&quot;text&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;images&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  
    &lt;ul class=&quot;slider&quot; style=&quot;padding:0px !important;&quot;&gt;
      &lt;li&gt;&lt;img src=&quot;img/sample.png&quot;&gt;
      &lt;div class=&quot;caption1&quot;&gt;caption 1&lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt; &lt;img src=&quot;img/Group 3.png&quot;&gt;
      &lt;div class=&quot;caption2&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;caption3&quot;&gt;caption 2&lt;/div&gt;
      &lt;div class=&quot;caption5&quot;&gt;caption 3&lt;/div&gt;
      &lt;div class=&quot;caption4&quot;&gt;caption 4&lt;/div&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
   
   
   
  
  &lt;section id=&quot;conD&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;grid menu-content&quot; id=&quot;menu1-content&quot;&gt;
    
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
        &lt;div class=&quot;photo&quot; style=&quot;background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&amp;d=identicon&amp;r=PG);&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;text&quot;&gt;
        &lt;h3&gt;Title &lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor &lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/article&gt; 
  
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
        &lt;div class=&quot;photo&quot; style=&quot;background-image: url(img/sample.jpg);&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;text&quot;&gt;
        &lt;h3&gt;Headingg&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor &lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/article&gt; 
  
  
     &lt;article&gt; 
      &lt;a href=&quot;#&quot;&gt;
        &lt;div class=&quot;photo&quot; style=&quot;background-image: url(img/sample.jpg);&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;text&quot;&gt;
        &lt;h3&gt;Headingg&lt;/h3&gt;
        &lt;p&gt;Lorem ipsum dolor &lt;/p&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/article&gt; 
    
    &lt;/div&gt;
  
  &lt;/div&gt; 
  &lt;/section&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.boxA:after {
    content:&quot;&quot;;
    display: block;
    clear: both;
  }
  
  .boxA {
    height: 90px;
    position: fixed; 
    border-bottom: 1px solid #E0DCDC;
    top: 0;
    width: 100%;
    background-color: white;
    max-width: 1440px;
  
  
  
  }
  
  .boxA img {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translate(0, -50%);
  }
  
  .box2 ul {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 10px;
  }
  
  
  .box1 {
    float: left;
     width: auto;
  }
  
  .box2 {
    float: right;
    width: auto; 
  }
  
  
  
  .box2 ul {
    margin: 0;
    padding: 0;
    list-style: none;  
  }
  
  
  .box2 li a {
    display: block;
    padding: 0px 50px;
    color: inherit;
    text-decoration: none; 
    font-size: 12px;
  }
  
  .box2 li a:hover {
    text-decoration: underline;
  }
  
  .box2 ul:after {
    content: &quot;&quot;;
    display: block;
    clear: both;
  }
  
  .box2 li {
    float: left;
    width: auto;
    font-family: 'Gotham';
    letter-spacing: 2.5px;
  }
  
  
  .box1 img {
    position: absolute;
    width: 20%;
    height: auto;
  }
  
  #top-logo {
    margin-top: 40px;
  }
  
  
  #top-logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    height: auto;
  }
  
  
  
  body {
    font-family: gotham;
    margin: 0px  !important;
    color: #827F88;
    letter-spacing: 0.4px; 
    line-height: 1.9;
  }
  
  
  .conA {
    height: 100vh;
    display: flex; 
    position: relative;
  }
  
  
  .conA #container {
    margin: 0;
    display: flex; 
    align-items: flex-start;
    position: absolute;
    top: 50%;
    left: 10%;
      transform: translate(0%, -50%);
  }
  
  #heroText {
    font-size: 37px;
    color: #56525E;
    line-height: 1 !important;
  }
  
  
  .conA #heroText {
    height: 400px;
    padding-top: 100px;
  }
  
  
  
  
  
  
  #conD ul {
    margin: 0 0 30px -30px;
    padding: 0;
    list-style: none;
  }
  
  
  #conD li  {
    padding: 35px;
    display: block;
    text-decoration: none;
    font-size: 15.5px;
    letter-spacing: 2px;
    color: inherit;
  }
  
  
  #conD li {
    float: left; 
    width: auto;
  }
  
  #conD ul:after {
    content:&quot;&quot;;
    display: block;
    clear: both;
  }
  
  
  #conD .menu {
    margin-bottom: 20px
  }
  
  
  .grid {
    display: grid;
    justify-content: start; 
    margin-top: -20px;
  } 
  
  
  .grid .photo {
    width: 100%;
    background-size: contain;
    background-position: center;
  }
  
  .grid .photo:after {
    content: &quot;&quot;;
    display: block;
    padding-bottom: 100%;
  }
  
  .grid a {
    display: block;
    text-decoration: none;
    color: inherit;
  
  }
  
  .grid a:hover {
    opacity: 0.8;
  }
  </code></pre>
  <p>JQUERY:</p>
  <pre><code>$(document).ready(function(){
        $('.slider').bxSlider({
        auto: true,
        pause: 3000,
         mode: 'fade',
         speed: 1200, 
        pager: false  
  });
      });
  
  
  (function ($) {
    $(document).ready(function(){
  
      // hide .navbar first
      $(&quot;.boxA&quot;).hide();
  
      // fade in .navbar
      $(function () {
          $(window).scroll(function () {
  
                   // set distance user needs to scroll before we start fadeIn
              if ($(this).scrollTop() &gt; 50) {
                  $('.boxA').fadeIn();
                  $('#top-logo').fadeOut();
  
  
              } else {
                  $('.boxA').fadeOut();
                  $('#top-logo').fadeIn();
  
              }
          });
      });
  
  });
    }(jQuery));
  </code></pre>