Header with full-height nav items
Thumbnail

.uk-container.uk-container-xlarge .navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m') each i in header each j in i.navbar div(uk-grid) .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left h1 a(href='/') img(src=j.src) .uk-width-expand.uk-position-relative ul.uk-flex.uk-flex-stretch.uk-flex-right.navbar(style='height: 100%;') each k,index in j.nav if index===0 li.uk-active a.text-medium.uk-text-bold(href=k.href)=k.text else li a.text-medium.uk-text-bold(href=k.href)=k.text each l,index in i.navButton if index===0 li a.uk-button.uk-button-secondary.uk-border-pill.uk-box-shadow-small(href=l.href uk-toggle) img(src=l.src uk-svg) span=l.text else li a.uk-button.uk-button-primary.uk-border-pill.uk-box-shadow-small(href=l.href) img(src=l.src uk-svg) span=l.text
.navbar { li { width: 12%; display: flex; align-items: center; justify-content: center; a { width: 100%; font-size: 1rem; text-align: center; letter-spacing: 0.8px; white-space: nowrap; &:not(.uk-button){ height: 100%; display: flex; justify-content: center; align-items: center; } &:hover { background: $global-secondary-background; border-color: $global-secondary-background; color: #fff; } &.uk-button { width: 144px; margin-left: 10px; line-height: 40px; white-space: nowrap; padding: 0 10px; img + svg { position: relative; top: 3px; margin-right: 7px; } span { font-weight: bold; } } } &.uk-active { a { background: $global-primary-background; color: #fff; } } } } @include mq(1200px){ .navbar li a { letter-spacing: 0; font-size: 14px; } .navbar li a.uk-button { width: 120px; } }