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
Post a Comment