Jquery навигация .active не работает на мобильном телефоне

Question

Эта навигация .active работает, когда находится в мобильном представлении, но не работает на мобильном телефоне.

CSS

.active i, .active p {
color: #4BC8FF;
}

HTML

<div class='nav' id='nav' role="navigation">
  <a class='item' href='/home'><i class='material-icons'>home</i> <p>Home</p></a>
  <a class='item' href='/browse'><i class='material-icons'>play_arrow</i> <p>Browse</p></a>
  <a class='item' href='/search'><i class='material-icons'>airplay</i> <p>Search</p></a>
  <a class='item' href='/about'><i class='material-icons'>supervisor_account</i> <p>About</p></a>
  <a class='item' href='/login'><i class='material-icons'>search</i> <p>Login</p></a>
</div>

скрипт

   jQuery(function($) {
 var path = window.location.href;
 $('#nav a').each(function() {
  if (this.href === path) {
   $(this).addClass('active');
  }
 });
});