javascript - Can't get active navigation to work on site -


no matter do, can't seem active navigation work on site. here's url: http://helloarchie.blue

as far can tell, urls correct (bar categories) i'm getting confused navigation css.

here's 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 > {  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 {  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 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');  }  });  });   


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -