title: how to change color of hamburger in bootstrap4
body: <p><a href="https://i.stack.imgur.com/kSuVW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kSuVW.jpg" alt="in this picture color of sticks is black"></a>. </p>
  
  <p>I need to change color of stick to white while scroll in responsive version, but now color is black while scroll. How can change color to white?
  This is html:</p>
  
  <pre><code>&lt;div class="menu_area"&gt;
                          &lt;nav class="navbar navbar-expand-lg navbar-light"&gt;
                              &lt;!-- Logo --&gt;
                              &lt;a class="navbar-brand" href="#"&gt;
                                  &lt;img src="img/svg/black.svg" class="lia-logo" style="margin-top: -15px;width: 48px; height: 38px;"&gt;
                              &lt;/a&gt;
  
  
                             &lt;button class="navbar-toggler"  type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-navbar" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;span class="zina"&gt;&lt;/span&gt;&lt;/button&gt;
  
  
                              &lt;!-- Menu Area --&gt;
                              &lt;div class="collapse navbar-collapse" id="ca-navbar"&gt;
                                  &lt;ul class="navbar-nav ml-auto" id="nav" style="margin-right: -220px;"&gt;
                                      &lt;li class="nav-item active"&gt;&lt;a class="nav-link" href="#home" style="color: #000;"&gt;Home&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#about" style="color: #000;"&gt;About&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#features" style="color: #000;"&gt;Why Lia&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#application" style="color: #000;"&gt;Application&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#support" style="color: #000;"&gt;Support&lt;/a&gt;&lt;/li&gt;
  &lt;!--                                &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#team"&gt;Team&lt;/a&gt;&lt;/li&gt;--&gt;
                                      &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#contact" style="color: #000;"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
  &lt;!--
  &lt;!--
                                  &lt;div class="sing-up-button d-lg-none"&gt;
                                      &lt;a href="#"&gt;Sign Up Free&lt;/a&gt;
                                  &lt;/div&gt;--&gt;
                              &lt;/div&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>This is CSS:</p>
  
  <pre><code>.menu_area .navbar-brand {
      font-size: 72px;
      font-weight: 700;
      color: #fff;
      margin: 0;
      line-height: 1;
      padding: 0;
  }
  
  
  .menu_area .navbar-brand:hover,
  .menu_area .navbar-brand:focus {
      color: #fff;
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
   #ca-navbar {
          padding: 30px;
          color: red;
          border-radius: 3px;
          background: linear-gradient(to right, #007ADF, #00ECBC);      
          text-align: left;
      }
  }
  @media (min-width: 320px) and (max-width: 767px) {
  #ca-navbar {
          padding: 20px;
          border-radius: 3px;
  /*      background-color: #CFD1D2;*/
          background: linear-gradient(to right, #007ADF, #00ECBC);      
          text-align: left;
      }
  }
  </code></pre>
  
  <p>and I have this code via code element: </p>
  
  <pre><code>background-image: url(data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E);
  </code></pre>
  
  <p>and I wrote this:</p>
  
  <pre><code> $window.on('scroll', function () {
          if ($window.scrollTop() &gt; 48) {
              $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
          } else {
             $('.navbar-toggler').attr('src',"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
          }
      });
  </code></pre>
  
  <p>but it doesn't work, what is the problem?</p>
  
  <p>Maybe I have some errors in js code?
  How can I do that?
  Maybe I have some errors in js code?</p>