Menu icon Foundation
Active class in top-bar not working

Hi there. I'm having some difficulties getting the active class on my li item within the top-bar menu to work.

I am using the following from the settings.scss to modify:

$topbar-bg-color: #43b8ea;
$topbar-link-bg-hover: #272727;
$topbar-link-bg-active:  #272727;
$topbar-link-bg-active-hover: darken( #272727, 5%);
            

         

It seems however that the following style is taking precedence

.top-bar-section li:not(.has-form) a:not(.button) {
    background: #43b8ea;
}
            

         

Can someone help me workout what's going on? If I remove the the above style with the inspector the nav works as it should.

Thanks.

C

activetopbar

Hi there. I'm having some difficulties getting the active class on my li item within the top-bar menu to work.

I am using the following from the settings.scss to modify:

$topbar-bg-color: #43b8ea;
$topbar-link-bg-hover: #272727;
$topbar-link-bg-active:  #272727;
$topbar-link-bg-active-hover: darken( #272727, 5%);
            

         

It seems however that the following style is taking precedence

.top-bar-section li:not(.has-form) a:not(.button) {
    background: #43b8ea;
}
            

         

Can someone help me workout what's going on? If I remove the the above style with the inspector the nav works as it should.

Thanks.

C

Carlos R almost 6 years ago

So this is a bug which has been fixed here:

https://github.com/zurb/foundation/pull/4234

Anyone kind enough to explain what my steps should be at this stage?

How do I update my version of foundation to include this fix?

Many thanks,

C

Jason Zudell almost 6 years ago

You can wait for the patch to be pulled or just add

.top-bar-section {
  li {
    &.active:not(.has-form) {
      a:not(.button) {
        padding: 0 $topbar-height / 3;
        line-height: $topbar-height;
        color: $topbar-link-color-active;
        background: $topbar-link-bg-active;
        &:hover { background: $topbar-link-bg-active-hover; }
      }
    }
  }
}

from the pull request.

Rafi Benkual almost 6 years ago

Thanks!
We merged the pull request. It will be part of the 5.1 release later today.

https://github.com/zurb/foundation/pull/4234

If you are using the CLI, you just cd into into the project folder and run bower update. Make sure your bower.json file points to 5.1

{
  "name": "foundation-compass-app",
  "version": "0.0.1",
  "private": "true",
  "dependencies": {
    "foundation": "5.1"
  }
}