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

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);
}