无论我做什么，我似乎无法让主动导航在我的网站上运行。这是网址：http://helloarchie.blue
据我所知，网址是正确的（条形类别），但我对导航CSS感到困惑。
这是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');
}
});
});