Highlight selected HTML menu item in JavaScript and jQuery

Hello, 

Javascript Highlight Selected Menu Item of Current Page

It works when the first page loads but doesn't work when I press another link.

Can you help me edit the code?

<script type="text/javascript">
    $(function () {
        var url = window.location.href;
        $("nav ul li a").each(function () {
            if (url == (this.href)) {
                $(this).closest("nav ul li").addClass("current-menu-item");
            }
            else {
                $(this).closest("nav ul li").removeClass("current-menu-item");
            }
        });
    });
</script>

     <div class="qrt-menu">
       <div id="qrt-dynamic-menu" class="qrt-dynamic-menu">
         <nav>
           <ul>
             <li class="current-menu-item">
               <a class="qrt-mobile-fix" href="home-video.html">Home</a>
               <ul>
                 <li class="qrt-this-page"><a href="home-slider.html">Home slider</a></li>
                 <li><a href="home-video.html">Home video</a></li>
                 <li><a href="home-image.html">Home image</a></li>
                 <li><a href="home-combined.html">Home combined</a></li>
                 <li><a href="home-classic.html">Home classic</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="about-us.html">About</a>
               <ul>
                 <li><a href="about-us.html">About us</a></li>
                 <li><a href="about-me.html">About me</a></li>
                 <li><a href="about-us-classic.html">About us classic</a></li>
                 <li><a href="about-me-classic.html">About me classic</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="portfolio-fs-masonry-1.html">Portfolio</a>
               <ul>
                 <li><a href="portfolio-half-masonry-1.html">Half masonry</a></li>
                 <li><a href="portfolio-half-masonry-2.html">Half masonry 2</a></li>
                 <li><a href="portfolio-half-grid-1-col.html">Half grid 1 column</a></li>
                 <li><a href="portfolio-half-grid-2-col.html">Half grid 2 column</a></li>
                 <li><a href="portfolio-fs-masonry-1.html">fullscreen masonry</a></li>
                 <li><a href="portfolio-fs-masonry-2.html">fullscreen masonry 2</a></li>
                 <li><a href="portfolio-fs-grid-3-col.html">fullscreen grid 3 column</a></li>
                 <li><a href="portfolio-fs-grid-2-col.html">fullscreen grid 2 column</a></li>
                 <li><a href="single-work-1.html">Single work 1</a></li>
                 <li><a href="single-work-2.html">Single work 2</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="contact.html">Contact</a>
               <ul>
                 <li><a href="contact.html">Contact type 1</a></li>
                 <li><a href="contact-2.html">Contact type 2</a></li>
               </ul>
             </li>
             <li>
               <a class="qrt-mobile-fix" href="blog-list.html">Blog</a>
               <ul>
                 <li><a href="blog-list.html">Blog list</a></li>
                 <li><a href="publication.html">Publication</a></li>
               </ul>
             </li>
           </ul>
         </nav>
       </div>
     </div>