title: Change color on hover and when navbar-toggle is collapsed?
body: <p>I am trying to remake this: <a href="https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp</a></p>
  
  <p>The thing is, I don't want to just copy this example, I want to make it my own by changing certain parts (after first 100% remaking it).</p>
  
  <p>This is the end-result: <a href="https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage" rel="nofollow noreferrer">https://www.w3schools.com/bootstrap/trybs_theme_company_full.htm#myPage</a></p>
  
  <p>If you try to make the page smaller, you will see that the navbar changes to a button (consisting of 3 icon-bars on top of eachother) that you can click. Now I want to change this button so it has the following characteristics:</p>
  
  <ul>
  <li>If you hover on it, background should become white and the 3 icon-bars should become orange;</li>
  <li>If you click on the button, background should become white and the 3 icon-bars should become orange. So what I want is that when the navbar has collapsed it should have this orange/white color scheme. If it hasn't collapsed it should return to normal (unless it's been hovered on)</li>
  </ul>
  
  <p>The problem is, nothing I have tried works.</p>
  
  <p>Here is my relevant html:</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-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#myPage"&gt;Logo&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#pricing"&gt;PRICING&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my relevant cs:</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-html lang-html prettyprint-override"><code>    .navbar {
          margin-bottom: 0;
          background-color: #f4511e;
          z-index: 9999;
          border: 0;
          font-family: Montserrat, sans-serif;
          font-size: 12px !important;
          letter-spacing: 4px;
          border-radius: 0;
      }
  
      .navbar li a, .navbar .navbar-brand {
          color: #FFFFFF !important;
      }
  
      .navbar-nav li a:hover, .navbar-nav li.active a {
          color: #f4511e !important;
          background-color: #FFFFFF !important;
      }
  
      .navbar-default .navbar-toggle {
          border-color: transparent;
          color: #ffffff;
      }
  
      .navbar-toggle:hover {
          background: white !important;
          color: #F4511e !important;
      }
  
      .navbar-toggle:focus {
          background: white !important;
          color: #F4511e !important;
      }
  
      .navbar-toggle:hover .icon-bar {
          background: #F4511e !important;
      }
  
      .navbar-toggle:focus .icon-bar {
          background: #F4511e !important;
      }
  
      .navbar-toggle .icon-bar {
          background: white !important;
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The big problem I am having is that focus doesn't do what I want, because when I click the button and then click somewhere else it changes back to its standard color scheme. I understand why, because it's not active anymore and isn't being hovered.</p>
  
  <p>So I need somethink like focus, but that's linked with the navbar being collapsed or not. Do you guys have any idea how to achieve this? </p>
  
  <p>After searching around the internet I found this question:
  <a href="https://stackoverflow.com/questions/31673697/how-to-change-navbar-color-when-nav-toggle-is-clicked">how to change navbar color when nav-toggle is clicked</a></p>
  
  <p>It's almost the same question as I have, but I don't really understand what Alaksandar Jesus Gene did and I can't make it work. Can someone explain what he did (see below) and help me understand what I should change to make it work in my own example?</p>
  
  <p>Solution code that I don't quite understand:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.navbar-yellow{
  
      background-color: yellow !important;
  }</code></pre>
  </div>
  </div>
  </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-html lang-html prettyprint-override"><code>$(".navbar-toggle").click(function(){
  $("nav").toggleClass("navbar-yellow");
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help/ideas is/are greatly appreciated.</p>
  
  <p>Thanks in advance,</p>