title: Navigation menu won't stay on front of the screen
body: <p>Java Script for Navigation menu:<br>
    //
  
  <pre><code>  $(function() {
      // Stick the #nav to the top of the window
      var nav = $('#nav');
      var navHomeY = nav.offset().top;
      var isFixed = false;
      var $w = $(window);
  
     $w.scroll(function() {
      var scrollTop = $w.scrollTop();
      var shouldBeFixed = scrollTop &gt; navHomeY;
      if (shouldBeFixed &amp;&amp; !isFixed) {
          nav.css({
              position: 'fixed',
              top: 0,
              left: nav.offset().left,
              width: nav.width()
          });
          isFixed = true;
      }
      else if (!shouldBeFixed &amp;&amp; isFixed)
      {
          nav.css({
              position: 'static'
          });
          isFixed = false;
      }
      });
  
     });
  
  //]]&gt;  
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div&gt; &lt;div class="pic"&gt; &lt;img  class="image" src="logo.jpg"/&gt; &lt;/div&gt; &lt;/div&gt;  
  </code></pre>
  
  <p>CSS for classes: </p>
  
  <pre><code>.image{
  width: 1000px;
  height:800px;
  
  opacity: 0.3;
  filter: alpha(opacity=30); /* For IE8 and earlier */
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
     -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
        transition: all 1s ease;
         }
  .image:hover {
    width: 1100px;
    height: 900px;
    opacity: 0.9;
  filter: alpha(opacity=100); /* For IE8 and earlier */
  }
  
  
  
  
  .pic {
   border: 10px solid #fff;  
  
   height: 800px;
   width: 1000px;
   margin: 20px;
   overflow: hidden;
  
   -webkit-box-shadow: 5px 5px 5px #111;
        box-shadow: 5px 5px 5px #111;  
  
  }
  </code></pre>
  
  <p>Image is transparent and  zooms in and removes transparency when hovered. Navigation menu is <a href="https://i.stack.imgur.com/RvybO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RvybO.jpg" alt="enter image description here"></a>sticked on top and moves when scrolling(using JavaScript code). Image is placed right under nav menu and when hovered over image nav menu links become unclickable. Is there a way to fix menu to the front ? I tried position: fixed; but it doesn't work. </p>
  
  <p><a href="https://i.stack.imgur.com/ONGZN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ONGZN.jpg" alt="Here is what exactly I mean, in first picture links work normally but in 2. they hide behind picture"></a></p>