title: Remove html focus after scrolling the website
body: <p>I am playing with some website templates, I have this one that I am working on 
  My problem is, when you click an item on the menu, lets say PRODUCTOS, and then you scroll up or down, PRODUCTOS stays on focus always unless you click the screen so it unfocus, how can I unfocus the item when I scroll without having to click the screen?</p>
  
  <p>This is my css</p>
  
  <pre><code>.navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
      background-color: #fa7f86;
  }
  
  .navbar-default .nav li a:focus {
      border-radius: 3px;
      color: #fff;
      background-color: #F84E57;
  }
  .navbar-default .navbar-nav&gt;.active&gt;a {
      border-radius: 0;
      color: #fff;
      background-color: #F84E57;
  }
  .navbar-default .navbar-nav&gt;.active&gt;a:hover,
  .navbar-default .navbar-nav&gt;.active&gt;a:focus {
      color: #fff;
      background-color: #F84E57;
  }
  </code></pre>
  
  <p>And this the HTML, you can also see it in the link above</p>
  
  <pre><code> &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
              &lt;div class="navbar-header page-scroll"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;!-- &lt;a class="navbar-brand page-scroll" href="#page-top" style="max-width: 50%;"&gt;&lt;img class="img-responsive" src="img/logo.png" /&gt;
                  &lt;/a&gt; --&gt;
              &lt;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li class="hidden"&gt;
                          &lt;a href="#page-top"&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#quienessomos"&gt;Quiénes Somos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#productos"&gt;Productos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#inversiones"&gt;Inversiones&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#contactanos"&gt;Contáctanos&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="page-scroll" href="#puntosdeventa"&gt;Puntos de Venta&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.container-fluid --&gt;
      &lt;/nav&gt;
  </code></pre>