Foundation 6 Top Bar link color Sass

Question

If I look at _settings.scss I can't find a variable to style the Top Bar link color?

Something like: $topbar-link-color ? Is this variable somewhere?

Answer 1

In Foundation 6, Top Bar uses the primary color contained in:

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840,
);

But this color is, of course, not specific to the Top Bar. It is the color used for all <a> links. I believe that Foundation 5 had a special variable for it, but Foundation 6 does not.

You will have to create your own variable (e.g. $topbar-link-color: red;) and use it as:

.top-bar a { color: $topbar-link-color; }

If you're using Foundation's menu component, you might do:

.top-bar li a { color: $topbar-link-color; }