_sass/modules/_mainmenu.scss (63 lines of code) (raw):

@use "../taiga/grid"; @use "../taiga/mixins"; @use "../taiga/settings"; nav.mainmenu { display:block; margin:0 auto 2rem auto; text-align:center; padding-top: 12px; display:inline-block; text-transform: uppercase; font-weight:bold; &.active { border-bottom: 2px solid white;} li+li { margin-left:1*grid.$grid-column; } a, a:active { border:none; color:settings.$color-brand-50; font-weight:500; text-decoration: none; } a:hover { color: #303284; } } .nav-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; &:last-child { flex-grow: 1; justify-content: flex-end; @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') { justify-content: center; } & { font-size: 2rem; flex-wrap: nowrap; } } } .nav-items { padding-right: 1rem; &:hover { color: settings.$color-brand-50; } } .nav-logo { text-align:center; display:flex; padding-right: 1rem; @include mixins.breakpoint(settings.$breakpoint-20, 'max-width') { margin:0; @include grid.prepend(1); justify-content: center; align-items: center; } img { display:inline-block; width: 200px; } }