.navbar { display: flex; align-items: center; &.is-primary { background: linear-gradient(to right, $nomad-green-darker, $nomad-green-dark); height: 3.5rem; color: $primary-invert; padding-left: 20px; padding-right: 20px; overflow: hidden; align-items: center; justify-content: space-between; .navbar-item { color: rgba($primary-invert, 0.8); text-decoration: none; &:hover { color: $primary-invert; background: transparent; } &.is-active, &.active { color: $primary-invert; border-bottom-color: $primary-invert; } + .navbar-item { position: relative; &::before { width: 1px; height: 1em; background: rgba($primary-invert, 0.5); content: ' '; display: block; position: absolute; left: 0px; } } } .navbar-brand { z-index: $z-gutter; } .navbar-end { display: flex; align-items: stretch; justify-content: flex-end; margin-left: inherit; } .navbar-end > a.navbar-item { color: rgba($primary-invert, 0.8); &:hover { color: $primary-invert; background: transparent; } } .navbar-brand > a.navbar-item { &:hover { background: transparent; } } } &.is-secondary { background-color: $nomad-green-dark; padding: 1.25rem 20px 1.25rem 0; height: 4.5rem; font-weight: $weight-semibold; color: $primary-invert; .navbar-item { font-size: $size-4; } } &.is-popup { background-color: $nomad-green-dark; height: 3.5rem; color: $primary-invert; padding-left: 20px; padding-right: 20px; overflow: hidden; .navbar-brand { margin-right: 8px; } .navbar-item { color: white; .navbar-label { font-weight: 600; margin-right: 1rem; } } .navbar-end { display: flex; align-items: center; justify-content: flex-end; margin-left: inherit; } .navbar-end > a.navbar-item { color: rgba($primary-invert, 0.8); text-decoration: none; &:hover { color: $primary-invert; background: transparent; } } .navbar-brand > a.navbar-item { &:hover { background: transparent; } } } .navbar-item { display: flex; align-items: center; &.is-gutter { width: $gutter-width; display: block; padding: 0 1rem; font-size: 1em; // Unfortunate necessity to middle align an element larger than // plain text in the subnav. > * { margin: -5px 0; } @media #{$mq-hidden-gutter} { display: none; } } } }