diff --git a/src/themes/cgspace/app/navbar/navbar.component.scss b/src/themes/cgspace/app/navbar/navbar.component.scss index b2634545716..ffb068bae8b 100644 --- a/src/themes/cgspace/app/navbar/navbar.component.scss +++ b/src/themes/cgspace/app/navbar/navbar.component.scss @@ -1 +1,65 @@ -@import '../../../dspace/app/navbar/navbar.component'; +nav.navbar { + background-color: var(--ds-navbar-bg); + align-items: baseline; +} + +/** Mobile menu styling **/ +@media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { + .navbar { + width: 100vw; + background-color: var(--bs-white); + position: absolute; + overflow: hidden; + height: 0; + z-index: var(--ds-nav-z-index); + + &.open { + height: auto; + min-height: 100vh; + border-bottom: 5px var(--ds-header-navbar-border-bottom-color) solid; + } + } +} + +@media screen and (min-width: map-get($grid-breakpoints, md)) { + .reset-padding-md { + margin-left: calc(var(--bs-spacer) / -2); + margin-right: calc(var(--bs-spacer) / -2); + } +} + +/* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */ +.navbar-expand-md.navbar-container { + @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) { + >.navbar-inner-container { + padding: 0 var(--bs-spacer); + + a.navbar-brand { + display: none; + } + + .navbar-collapsed { + display: none; + } + } + + padding: 0; + } + + height: 80px; +} + +a.navbar-brand img { + max-height: var(--ds-header-logo-height); +} + +.navbar-nav { + ::ng-deep a.nav-link { + color: var(--ds-navbar-link-color); + + &:hover, + &:focus { + color: var(--ds-navbar-link-color-hover); + } + } +}