topic Change the color of the calcite-menu background within a colored nav/header? in Calcite Design System Questions

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

MichelleStuart — Tue, 30 Apr 2024 13:52:46 GMT

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?

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

KittyHurley — Thu, 02 May 2024 16:47:15 GMT

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

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

MichelleStuart — Thu, 02 May 2024 12:04:37 GMT

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

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

LefterisKoumis — Fri, 30 Aug 2024 02:03:42 GMT

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.