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