title: background color disappears on click
body: <p>my problem is that when the screen gets under 600px then navbar becomes a dropdown navbar. Now the problem is that when you scroll down 100px the navbar gets a black background but when i wanna open the dropdown menu the black background disappears... </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="costume.css"&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;!-- jQuery library --&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;!-- Latest compiled JavaScript --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;!-- Connect stylesheet --&gt;
          &lt;link rel="stylesheet" href="costume.scss"&gt;
    &lt;/head&gt;
    &lt;body&gt;
          &lt;div class="topnav" id="myTopnav" align="left"&gt;
                &lt;a href=""&gt;&lt;p&gt;Home&lt;/p&gt;&lt;/a&gt;
                &lt;a href=""&gt;&lt;p&gt;Portfolio&lt;/p&gt;&lt;/a&gt;
                &lt;a href=""&gt;&lt;p&gt;About&lt;/p&gt;&lt;/a&gt;
                &lt;a href=""&gt;&lt;p&gt;Impressum&lt;/p&gt;&lt;/a&gt;
                &lt;a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="banner topnav"&gt;&lt;/div&gt;
          &lt;div id="wrapper"&gt;&lt;/div&gt;
  
    &lt;script&gt;
          $(function(){
          $(window).scroll(function() {
                if($(window).scrollTop() &gt;= 100) {
                $('div#myTopnav').addClass('scrolled');
          } else {
                $('div#myTopnav ').removeClass('scrolled');
                      }
                });
          });
  
          $(function(){
          $(window).scroll(function() {
                if($(window).scrollTop() &gt;= 100) {
                $('a').addClass('scrolled2');
          } else {
                $('a').removeClass('scrolled2');
                      }
                });
          });
  
  
          function myFunction() {
              var x = document.getElementById("myTopnav");
              if (x.className === "topnav") {
                  x.className += " responsive";
              } else {
                  x.className = "topnav";
              }
          }
  
    &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>stylesheet </p>
  
  <pre><code>body {
    margin: 0;
    padding: 0;
    height: 2000px;
  }
  
  .topnav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: 100px;
    transition: 0.35s all ease;
    z-index: 1000;
    overflow: hidden;
  }
  
  .topnav a {
    display: inline-block;
    margin: 20px 50px;;
    list-style: none;
    text-align: right;
    text-decoration: none;
    font-size: 17px;
    transition: 0.35s all ease;
  }
  
  a {
    text-decoration: none;
    color: black;
  }
  a:hover {
    text-decoration: none;
  }
  
  
  .topnav a:hover {
    text-decoration: none;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
    float: right;
    display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {
    position: fixed;
    z-index: 1001;
   }
    .topnav.responsive .icon {
    position: fixed;
    right: 0;
    top: 0;
    }
  
    .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    z-index: 1001;
    }
    .topnav.responsive a:hover {
    padding-left: 10px;
    color: white;
   }
   }
  
  .banner {
    background: url('https://images.unsplash.com/photo-1431492299426-
  2ea1ce429cc0?ixlib=rb-
  0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;s=135705633ad6367a0565fceae4a57372');
    background-position: center;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
    position: absolute;
  }
  
  .scrolled {
    min-height: 10px;
    color: inherit;
    background: black;
    transition: 0.35s all ease-in-out;
    opacity: 0.85;
  
  }
  
  .scrolled2 {
    color: white;
    opacity: 0.95;
  
    .topnav a:hover {
          background-color: red;
    }
  }
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/RVYmKZ" rel="nofollow noreferrer">https://codepen.io/anon/pen/RVYmKZ</a> &lt;-- use chrome 
  <a href="https://jsfiddle.net/he7uhnya/" rel="nofollow noreferrer">https://jsfiddle.net/he7uhnya/</a></p>
  
  <p>there is a gif so you can see what i mean <a href="https://gyazo.com/aa5c558cea87f645a32817cba5ff56db" rel="nofollow noreferrer">https://gyazo.com/aa5c558cea87f645a32817cba5ff56db</a></p>