{{#markdown}} ```scss // // Top Bar Variables // $include-html-top-bar-classes: $include-html-classes; // Background color for the top bar $topbar-bg-color: $oil; $topbar-bg: $topbar-bg-color; // Height and margin $topbar-height: rem-calc(45); $topbar-margin-bottom: 0; // Controlling the styles for the title in the top bar $topbar-title-weight: $font-weight-normal; $topbar-title-font-size: rem-calc(17); // Style the top bar dropdown elements $topbar-dropdown-bg: $oil; $topbar-dropdown-link-color: $white; $topbar-dropdown-link-color-hover: $white; $topbar-dropdown-link-bg: $oil; $topbar-dropdown-link-bg-hover: $oil; $topbar-dropdown-link-weight: $font-weight-normal; $topbar-dropdown-toggle-size: 5px; $topbar-dropdown-toggle-color: $white; $topbar-dropdown-toggle-alpha: 0.4; // Set the link colors and styles for top-level nav $topbar-link-color: $white; $topbar-link-color-hover: $white; $topbar-link-color-active: $white; $topbar-link-color-active-hover: $white; $topbar-link-weight: $font-weight-normal; $topbar-link-font-size: rem-calc(13); $topbar-link-hover-lightness: -10%; // Darken by 10% $topbar-link-bg: $topbar-bg; $topbar-link-bg-hover: $jet; $topbar-link-bg-color-hover: $charcoal; $topbar-link-bg-active: $primary-color; $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); $topbar-link-font-family: $body-font-family; $topbar-link-text-transform: none; $topbar-link-padding: $topbar-height / 3; $topbar-back-link-size: $h5-font-size; $topbar-link-dropdown-padding: 20px; $topbar-button-font-size: 0.75rem; $topbar-button-top: 7px; $topbar-dropdown-label-color: $monsoon; $topbar-dropdown-label-text-transform: uppercase; $topbar-dropdown-label-font-weight: $font-weight-bold; $topbar-dropdown-label-font-size: rem-calc(10); $topbar-dropdown-label-bg: $oil; // Top menu icon styles $topbar-menu-link-transform: uppercase; $topbar-menu-link-font-size: rem-calc(13); $topbar-menu-link-weight: $font-weight-bold; $topbar-menu-link-color: $white; $topbar-menu-icon-color: $white; $topbar-menu-link-color-toggled: $jumbo; $topbar-menu-icon-color-toggled: $jumbo; // Transitions and breakpoint styles $topbar-transition-speed: 300ms; // Using rem-calc for the below breakpoint causes issues with top bar $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})"; // Divider Styles $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); // Sticky Class $topbar-sticky-class: ".sticky"; $topbar-arrows: true; //Set false to remove the triangle icon from the menu item ``` {{/markdown}}