Change the color of the calcite-menu background within a colored nav/header?

[MichelleStuart]

Hi,

It appears like there is no way to change the color of a calcite-menu to match the color of the navigation it is within.  Attached is an image of what happens in the sample on the documentation page.  I tried using calcite-menu-background and calcite-menu-item-background but to no avail.  Can the menu be anything but white?

[KittyHurley · Accepted solution]

Hi @MichelleStuart The example above also includes the Menu component, which is why there are some visual differences.

Would recommend altering the look and feel of the app with theming, so the changes would apply across the UI, and you could specify CSS variables for Navigation and Menu, something like: https://codepen.io/geospatialem/pen/GRLaWwJ.

.custom-example-theme {
  --calcite-color-brand: #308e29;
  --calcite-color-brand-hover: #267121;
  --calcite-color-brand-press: #1d5519;
  --calcite-color-background: #faf3e3;
  --calcite-color-foreground-1: #fffaed;
  --calcite-color-foreground-2: #fae9c8;
  --calcite-color-foreground-3: #fce5b6;
  --calcite-color-foreground-current: #ebd09d;
  --calcite-color-info: #267121;
  --calcite-color-success: #308e29;
  --calcite-color-warning: #f1c21b;
  --calcite-color-danger: #d83020;
  --calcite-color-danger-hover: #a82b1e;
  --calcite-color-danger-press: #851012;
  --calcite-color-text-1: #3a3335;
  --calcite-color-text-2: #3d3638;
  --calcite-color-text-3: #463d40;
  --calcite-color-text-inverse: #ffffff;
  --calcite-color-text-link: #267121;
  --calcite-color-border-1: #e6ddd1;
  --calcite-color-border-2: #e8e1dc;
  --calcite-color-border-3: #e6ddd1;
  --calcite-color-border-input: #a1a19e;
  background-color: var(--calcite-color-background);
}

calcite-navigation {
  --calcite-navigation-background: var(--calcite-color-foreground-current);
  --calcite-navigation-border-color: var(--calcite-color-background);
}

calcite-menu {
  --calcite-color-foreground-1: var(--calcite-color-foreground-current);
}

[MichelleStuart]

Thank you KItty, this is really helpful.  I was getting tripped up by trying to use something like --calcite-menu-background in the calcite menu css instead of just changing the calcite-color-foreground-1 variable there.  I really appreciate your help.

All the best,

Michelle

[LefterisKoumis]

Is it possible to change the font style for a component of the calcite-navigation? For example, can I change the color and font size of just the heading? Thanks.