Setting Top Bar colors ( topbar-link-bg-active ) is not working

[ghost]

The variable topbar-link-bg-active that I've changed in the file _settings.scss has the right value, the problem is that the style is being overwritten.

Looks like there are two selectors, one with media query and other one without media query. The ones without media query overwrites the right one.

That's what I see in Firebug (grey color overwrites pink color):

Someone could try this, just modify the variable topbar-link-bg-active?

Thanks.

[olefredrik]

I opened _settings.scss, uncommented the $topbar-link-color-active property on line 1235 and changed the color to orange.

With grunt running in the background, I saved the _settings.scss file and checked in my terminal that css/app.css was successfully created.

I opened a new browser window, and voila. The topbar-link-active color was set to orange.

[ghost]

Is the variable $topbar-link-bg-active (background color). Seems you tried $topbar-link-color-active (text color).

[olefredrik]

Sorry, my bad. I'll check tomorrow.

[ghost]

I did not realize that background color for the active menu item is overwritten in file _structure.scss:

/**
 * 3.0 Header, sidebar and footer
 * ----------------------------------------------------------------------------
 */

// A more subtle background color for the active menu item
.top-bar-section li.active:not(.has-form) a:not(.button)  {
    background: #272727;
}
.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
    background: #202020;
}

So everything works as expected, just comment this lines if you want to set the colors for the active menu item in file _settings.scss.

[olefredrik]

Ah. Right. I put it there as a distinct preference for the demo site. Would not make the setting in settings SCSS file as it differs from the default installation of Foundation.

[swthate]

I apologize for the post necromancy, seeing as this is nearly a year old. However, I was having this exact problem, and fought it all yesterday afternoon. With a fresh mind this morning, I discovered my own $topbar-link-bg-active variable was being overwriten by scss/site/_topbar.scss.

In that file, the same css snippet from _structure.scss was found.

This probably isn't much of an issue any more, but I just wanted to mention this in case there is anyone else who may be as lost/frustrated as I was yesterday!

Thanks for all the hard work, Ole. Skol!