Header with full-height nav items

Thumbnail

Pug
Scss

.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; }
}