Can't get active navigation to work on site

Question

No matter what I do, I can't seem to get the active navigation to work on my site. Here's the URL: http://helloarchie.blue

As far as I can tell, the URLs are correct (bar categories) but I'm getting confused with the navigation CSS.

Here's the HTML:

 <nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper">
 <div class="cbp-hsinner">
 <ul class="cbp-hsmenu">
 <li><a href="http://helloarchie.blue"><span class="navi">01</span> Home</a></li>
 <li><a class="arrow" href="#"><span class="navi">02</span> Categories</a>
 <ul class="cbp-hssubmenu">
 <li><a href="http://helloarchie.blue/category/personal/"><span>Personal</span></a></li>
 <li><a href="http://helloarchie.blue/category/informative/"><span>Informative</span></a></li>
 <li><a href="http://helloarchie.blue/category/guides/"><span>Guides</span></a></li>
 <li><a href="http://helloarchie.blue/category/reviews/"><span>Reviews</span></a></li>
 <li><a href="http://helloarchie.blue/category/fashion-friday/"><span>#fashionfriday</span></a></li>
 <li><a href="http://helloarchie.blue/category/humour/"><span>Humour</span></a></li>
 </ul>
 </li>
 <li><a href="http://helloarchie.blue/about"><span class="navi">03</span> About</a></li>
 <li><a href="http://helloarchie.blue/archives"><span class="navi">04</span> Archives</a></li>
 </ul>
 </div>
 </nav>

CSS:

 .cbp-hsmenu-wrapper .cbp-hsmenu {
 width: 100%;
 margin: 0 auto;
 text-align: center;
 background: #2fdcce;
 position: fixed;
 }

 .cbp-hsmenu > li {
 display: inline-block;
 margin-left: 0em;
 }

 .cbp-hsmenu > li:after {
 content: "";
 padding: 0 10px;
 color: #383d3d;
 display: inline-block;
 }

 .cbp-hsmenu > li:last-child:after { 
 content: "";
 color: #383d3d;
 display: inline-block;
 }

 .cbp-hsmenu > li:first-child {
 margin-left: 3em;
 }

 .cbp-hsmenu > li > a {
 color: #fff;
 font-family: 'brandon-grotesque', arial, sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 0.85em;
 line-height: 3.5em;
 display: inline-block;
 position: relative;
 z-index: 10000;
 outline: none;
 letter-spacing: 0.1em;
 }

 .cbp-hsmenu > li > a.active { color: #1dbbae; }

 .cbp-hsmenu > li.log { margin-right: 160px; font-size: 1.3em; font-weight: 900; }

 .cbp-hssubmenu {
 position: absolute;
 left: 0;
 top: 100%;
 width: 100%;
 z-index: 0;
 text-align: center;
 visibility: hidden;
 background: #fff;
 }

 .cbp-hssubmenu:before, 
 .cbp-hssubmenu:after { 
 content: " "; 
 display: table; 
 }

 .cbp-hssubmenu:after { 
 clear: both; 
 }

 .cbp-hssubmenu > li {
 width: 16.2%;
 display: inline-block;
 vertical-align: top;
 opacity: 0;
 -webkit-transition: opacity 0.1s 0s;
 -moz-transition: opacity 0.1s 0s;
 transition: opacity 0.1s 0s;
 }

 .cbp-hssubmenu > li a {
 display: block;
 text-align: center;
 color: #383A3d;
 font-family: 'brandon-grotesque', arial, sans-serif;
 font-weight: 500;
 text-transform: uppercase;
 font-size: 0.7em;
 outline: none;
 padding: 1em 0.5em 0.5em 0.5em;
 letter-spacing: 0.3em;
 }

 .cbp-hssubmenu > li a span {
 display: block;
 min-height: 0.8em;
 padding-bottom: 5px;
 }

 .cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu {
 z-index: 1000;
 visibility: visible;
 }

 .cbp-hsmenu > li.cbp-hsitem-open .cbp-hssubmenu > li {
 opacity: 1;
 -webkit-transition: opacity 0.5s 0.1s;
 -moz-transition: opacity 0.5s 0.1s;
 transition: opacity 0.5s 0.1s;
 }

JS:

 jQuery(function() {
 jQuery('.cbp-hsmenu > li > a').each(function() {
 var href = jQuery(this).find('a').attr('href');
 if (href === window.location.pathname) {
 jQuery(this).addClass('active');
 }
 });
 });