Menu icon Foundation
Can't change topbar-link-bg-active

I changed my topbar and tabbar off-canvas navigation with all the typography and color changes I wanted to make; however, the background for the active link is still black (#272727 to be precise). In my custom settings file I included the variable for topbar-link-bg-active and have tried giving it all manner of color values, but nothing takes hold. It is acting like it's still receiving instructions to modify the default color value $oil... if that makes sense.

When I inspect this troublesome element in dev tools, the top/most specific rule is for ".top-bar-section li.active:not(.has-form) a:not(.button), and simply states background: #272727.

I haven't been able to find where it's still receiving this color instruction from...

Then, the rule just below that, reads as following:

@media only screen and (min-width: 51.25em) .top-bar-section l.active:not(.has-form) a:not(.button)

This rule seems to be correctly declaring the active background color to my $primary-color (#47607b), but is overridden by the former, more specific rule.

This is a bit confusing for me. First of all, what is min-width 51.25em referring to? As far as I know, Foundations breakpoints follow the pattern of 40em, 40.063em, 64em, 64.063em, etc. I haven't touched the breakpoints at all myself.

Maybe the fact that this is Ole Fredrik's FoundationPress theme is relevant?

But why would $topbar-link-bg-active not apply to all breakpoints?

Sorry for the long-windedness of this question. My brain is mush after trying to figure this out all afternoon.

Thanks in advance!

(P.S. below are the relevant variables that I have modified)

$topbar-bg-color: $primary-color;
$topbar-bg: $topbar-bg-color;
$topbar-link-font-size: rem-calc(14);
$topbar-link-bg-hover: darken($primary-color, 5%);
$topbar-link-weight: $font-weight-normal;
$topbar-link-bg-active: $primary-color;

topbartopbar activetop-bartop-bar active

I changed my topbar and tabbar off-canvas navigation with all the typography and color changes I wanted to make; however, the background for the active link is still black (#272727 to be precise). In my custom settings file I included the variable for topbar-link-bg-active and have tried giving it all manner of color values, but nothing takes hold. It is acting like it's still receiving instructions to modify the default color value $oil... if that makes sense.

When I inspect this troublesome element in dev tools, the top/most specific rule is for ".top-bar-section li.active:not(.has-form) a:not(.button), and simply states background: #272727.

I haven't been able to find where it's still receiving this color instruction from...

Then, the rule just below that, reads as following:

@media only screen and (min-width: 51.25em) .top-bar-section l.active:not(.has-form) a:not(.button)

This rule seems to be correctly declaring the active background color to my $primary-color (#47607b), but is overridden by the former, more specific rule.

This is a bit confusing for me. First of all, what is min-width 51.25em referring to? As far as I know, Foundations breakpoints follow the pattern of 40em, 40.063em, 64em, 64.063em, etc. I haven't touched the breakpoints at all myself.

Maybe the fact that this is Ole Fredrik's FoundationPress theme is relevant?

But why would $topbar-link-bg-active not apply to all breakpoints?

Sorry for the long-windedness of this question. My brain is mush after trying to figure this out all afternoon.

Thanks in advance!

(P.S. below are the relevant variables that I have modified)

$topbar-bg-color: $primary-color;
$topbar-bg: $topbar-bg-color;
$topbar-link-font-size: rem-calc(14);
$topbar-link-bg-hover: darken($primary-color, 5%);
$topbar-link-weight: $font-weight-normal;
$topbar-link-bg-active: $primary-color;
Steven Thate over 4 years ago

I have found the culprit.

In FoundationPress there is a custom topbar.scss partial which is one of the last partials to be imported.

Inside this partial (located in scss/site/), there are custom styles for .top-bar-section li.active. Comment these out, and voila!