Menu icon Foundation
.active class not staying applied with Menu component (Zurb Sites 6.3)

Hi,

I'm having trouble applying the active class to a link in the menu component of Foundation Zurb 6.3 dynamically using jQuery as per http://foundation.zurb.com/sites/docs/menu.html

The class is being applied initially on click, but on the new page load it is removed. I have tried a number of different solutions such as wrapping it in a $(document).ready(); function, applying the relevant :hover, :active, :target css selectors and using Foundation.reInit(); but nothing is working.

After searching for this, this seems like a trivial thing to achieve, so wonder if this may be a bug or I'm missing something obvious. Included some minimal code to give a better idea.

Any help appreciated, thanks in advance

HTML:

<nav class="main-col">
 <img class="hippos-header" src="../assets/img/svg/hippos-header-icon.svg" alt="99 Hippos Logo">

<ul class="vertical medium-horizontal hide-for-small-only menu float-right nav-top__links" id="navTopLinks">
   {{#each nav-links.top}}
      <li class="{{class}}">
         <a href="{{link}}">{{text}}</a>
      </li>
    {{/each} 
 </ul>
<!--nav-top__links-->
</nav>

 CSS:

.nav-top__links {
    @include vertical-align;

    a {
        font-size: rem-calc(14);
        letter-spacing: rem-calc(3.1);
        color: $body-font-color;
    }

    .active {
        border-bottom: 2px solid $hippos-pink;
    }
}
//NAV-TOP LINKS

JS:

//ACTIVE LINKS
$(document).ready(function(){
var selector = '#navTopLinks li a';

  $(selector).on('click', function(){
    $(selector).removeClass('active');
      $(this).addClass('active');
      console.log('test');
  });
});

menuactiveclassfoundation for sitejqueryhtmlcss

Hi,

I'm having trouble applying the active class to a link in the menu component of Foundation Zurb 6.3 dynamically using jQuery as per http://foundation.zurb.com/sites/docs/menu.html

The class is being applied initially on click, but on the new page load it is removed. I have tried a number of different solutions such as wrapping it in a $(document).ready(); function, applying the relevant :hover, :active, :target css selectors and using Foundation.reInit(); but nothing is working.

After searching for this, this seems like a trivial thing to achieve, so wonder if this may be a bug or I'm missing something obvious. Included some minimal code to give a better idea.

Any help appreciated, thanks in advance

HTML:

<nav class="main-col">
 <img class="hippos-header" src="../assets/img/svg/hippos-header-icon.svg" alt="99 Hippos Logo">

<ul class="vertical medium-horizontal hide-for-small-only menu float-right nav-top__links" id="navTopLinks">
   {{#each nav-links.top}}
      <li class="{{class}}">
         <a href="{{link}}">{{text}}</a>
      </li>
    {{/each} 
 </ul>
<!--nav-top__links-->
</nav>

 CSS:

.nav-top__links {
    @include vertical-align;

    a {
        font-size: rem-calc(14);
        letter-spacing: rem-calc(3.1);
        color: $body-font-color;
    }

    .active {
        border-bottom: 2px solid $hippos-pink;
    }
}
//NAV-TOP LINKS

JS:

//ACTIVE LINKS
$(document).ready(function(){
var selector = '#navTopLinks li a';

  $(selector).on('click', function(){
    $(selector).removeClass('active');
      $(this).addClass('active');
      console.log('test');
  });
});
Rafi Benkual over 2 years ago

I don't see anything in Foundation that would remove it. do you have a site to share to help debug it or can you set up a codepen demo?

 

http://codepen.io/rafibomb/pen/peBzYJ

Ash Williams over 2 years ago

 Thanks for the reply Rafi, I should have included it in the OP, you can check the code out @ http://staging.99hippos.com/

Ash Williams over 2 years ago

any ideas Rafi?