title: Transparent header on scroll to full colour - Nav overlay issue
body: <p>Currently my site has a transparent navbar when on scroll will change to full colour. The issue i am having is that the navbar also switches colour when the page is scrolled on the fullscreen navigation. </p>
  
  <p>How can i stop the navbar switching colour when the fullscreen navigation is open? Would i need to change me JS?</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".menu-btn a").click(function() {
      $(".overlay").fadeToggle(200);
      $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
  
    $('.overlay').on('click', function() {
      $(".overlay").fadeToggle(200);
      $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    });
  
    $('.menu a').on('click', function() {
      $(".overlay").fadeToggle(200);
      $(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
    });
  });
  
  $(document).ready(function() {
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if (scroll &gt; 100) {
        $(".navbar").css("background-color", "#dedede");
      } else {
        $(".navbar").css("background-color", "transparent");
      }
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: black;
  }
  
  .menu-btn {
    z-index: 999;
    display: inline;
    font-size: 32px;
  }
  
  .menu-btn a {
    display: inline-block;
    text-decoration: none;
    /* safari hack */
  }
  
  .btn-open:after {
    color: #fff;
    content: "\f394";
    font-family: "Ionicons";
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
  }
  
  .btn-open:hover:after {
    color: #ffffff;
  }
  
  .btn-close:after {
    color: #fff;
    content: "\f2d7";
    font-family: "Ionicons";
    -webkit-transition: all .2s linear 0s;
    -moz-transition: all .2s linear 0s;
    -o-transition: all .2s linear 0s;
    transition-property: all .2s linear 0s;
  }
  
  .btn-close:hover:after {
    color: #ffffff;
  }
  
  
  /* OVERLAY */
  
  .overlay {
    position: fixed;
    top: 0;
    z-index: 99;
    display: none;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: rgba(209, 180, 0, 0.96);
  }
  
  .overlay .menu {
    margin: 15% auto;
    width: 80%;
  }
  
  .overlay .menu ul {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  .overlay .menu ul li {
    float: left;
    padding: 6px 0 0 0;
    width: 50%;
    list-style: none;
    text-align: left;
    text-transform: uppercase;
  }
  
  .overlay .menu ul li#social {
    width: 100%;
    margin-top: 50px;
  }
  
  .overlay .menu ul li a {
    color: #d1b400;
    font-weight: 300;
    font-size: 20px;
    font-family: 'Old Standard TT', serif;
  }
  
  .overlay .menu ul li#social a {}
  
  .overlay .menu ul ul {
    margin-top: 20px;
  }
  
  .overlay .menu ul ul li {
    position: relative;
    float: none;
    margin: 0;
    width: 100%;
    border: 0;
  }
  
  .overlay .menu ul ul li a {
    color: #fff;
    text-transform: capitalize;
    font-weight: 300;
    font-size: 30px;
  }
  
  .overlay .menu ul ul li a:hover {
    color: #000000;
  }
  
  
  /* RESPONSIVE */
  
  @media screen and (max-width: 768px) {
    .overlay .menu ul li {
      float: none;
      margin-bottom: 25px;
      width: 100%;
    }
    .overlay .menu ul li:last-child {
      border: 0;
    }
    .overlay .menu ul ul {
      margin-top: 20px;
    }
    .menu-btn {
      right: 25px;
    }
  }
  
  .allexamples {
    position: absolute;
    bottom: 0;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    background: #e9e9e9;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #333;
    position: fixed;
  }
  
  .menu-social {
    display: inline-block;
    margin: 0 .4em;
  }
  
  .menu-social a {
    width: 44px;
    height: 44px;
    padding: 0;
    background-image: url("../img/cd-socials.svg");
    background-repeat: no-repeat;
    /* image replacement */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  
  .menu-social .menu-facebook a {
    background-position: 0 0;
  }
  
  .menu-social .menu-instagram a {
    background-position: -44px 0;
  }
  
  .menu-social .menu-dribbble a {
    background-position: -88px 0;
  }
  
  .menu-social .menu-twitter a {
    background-position: -132px 0;
  }
  
  .overlay .menu ul ul li.description {
    padding: 0px 0 10px 0px;
  }
  
  .overlay .menu ul ul li.description span {
    color: #000000;
    font-size: 13px;
    font-weight: 300;
    text-transform: none;
  }
  
  p.tel,
  p.email {
    margin: 0 0 3px 0;
  }
  
  p.tel a {
    color: #fff!important;
    font-weight: 300!important;
    font-size: 20px!important;
    letter-spacing: 1px;
  }
  
  p.email a {
    color: #fff!important;
    font-weight: 300!important;
    font-size: 20px!important;
    text-transform: none;
  }
  
  .menu-btn a span {
    font-size: 18px;
    color: #ffffff;
    line-height: 18px;
    font-weight: 600;
    position: relative;
    top: -5px;
    right: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
    &lt;nav class="navbar fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;img src="img/pb-white.png" width="30" height="30" alt=""&gt;
        &lt;/a&gt;
        &lt;span class="navbar-text"&gt;
          &lt;div class="menu-btn"&gt;
            &lt;a class="btn-open" href="javascript:void(0)"&gt;
              &lt;span&gt;MENU&lt;/span&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div class="overlay"&gt;
    &lt;div class="menu"&gt;
      &lt;div class="container"&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Branding&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Brand Development, Logos, Point, Point&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Digital&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Website Design, Website Development, Point, Point&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Print&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Business Cards, Leaflets, Point, Point&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Packaging&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Point, Point, Point, Point&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Infographics&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Point, Point, Point, Point&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;About Company&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Examples &amp; Case Studies of our work&lt;/span&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="description"&gt;&lt;span&gt;Get in touch with us to get your project started&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li id="social"&gt;
            &lt;ul class="contact"&gt;
              &lt;p class="email"&gt;&lt;a href="mailto:info@company.com"&gt;info@company.com&lt;/a&gt;&lt;/p&gt;
              &lt;p class="tel"&gt;&lt;a href="tel:01231212312"&gt;01234 566545&lt;/a&gt;&lt;/p&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="height:2000px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/whitinggg/pen/bLzxGG" rel="nofollow noreferrer">https://codepen.io/whitinggg/pen/bLzxGG</a></p>