Added support for changing the color of the navbar

This commit is contained in:
Alexandre Vryghem
2023-08-16 15:15:51 +02:00
parent 404ccd9b0e
commit f6649e1c38
4 changed files with 7 additions and 0 deletions

View File

@@ -6,6 +6,7 @@
} }
.dropdown-menu { .dropdown-menu {
background-color: var(--ds-navbar-bg);
overflow: hidden; overflow: hidden;
min-width: 100%; min-width: 100%;
border-top-left-radius: 0; border-top-left-radius: 0;

View File

@@ -1,4 +1,5 @@
nav.navbar { nav.navbar {
background-color: var(--ds-navbar-bg);
border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
align-items: baseline; align-items: baseline;
} }

View File

@@ -24,6 +24,7 @@
--ds-header-logo-height-xs: 50px; --ds-header-logo-height-xs: 50px;
--ds-header-icon-color: #{$link-color}; --ds-header-icon-color: #{$link-color};
--ds-header-icon-color-hover: #{$link-hover-color}; --ds-header-icon-color-hover: #{$link-hover-color};
--ds-navbar-bg: var(--ds-header-bg);
--ds-header-navbar-border-top-color: #{$white}; --ds-header-navbar-border-top-color: #{$white};
--ds-header-navbar-border-bottom-color: #{$gray-400}; --ds-header-navbar-border-bottom-color: #{$gray-400};
--ds-navbar-link-color: #{$cyan}; --ds-navbar-link-color: #{$cyan};

View File

@@ -4,6 +4,10 @@ nav.navbar {
align-items: baseline; align-items: baseline;
} }
.navbar-nav {
background-color: var(--ds-navbar-bg);
}
/** Mobile menu styling **/ /** Mobile menu styling **/
@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
.navbar { .navbar {