// Navigation bar

// Variables
@navbar-bg:                            #f9f9f9;
@navbar-breakpoint:                    @grid-breakpoint-sm;
@navbar-item-padding:                  15px;

.navbar-component {
  background-color: @navbar-bg;

  .navbar-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;

    @media (min-width: @navbar-breakpoint) {
      margin-right: -@navbar-item-padding;
      margin-left: -@navbar-item-padding;
      flex-direction: row;
      align-items: center;
    }

    & > a {
      display: block;
      padding: @navbar-item-padding;
    }
  }
}

// Navigation bar

// Variables
@navbar-bg:                            #f9f9f9;
@navbar-breakpoint:                    @grid-breakpoint-sm;
@navbar-item-padding:                  15px;

@navbar-item-color:                    @body-color;
@navbar-item-active-color:             @brand-primary;

.navbar-component {
  background-color: @navbar-bg;

  .navbar-list {
    display: flex;
    flex-basis: 100%;
    flex-flow: column nowrap;
    justify-content: center;

    @media (min-width: @navbar-breakpoint) {
      margin-right: -@navbar-item-padding;
      margin-left: -@navbar-item-padding;
      flex-direction: row;
      justify-content: flex-start;
    }

    & > a {
      display: block;
      padding: @navbar-item-padding;
      color: @navbar-item-color;
      text-align: center;

      &:hover,
      &:focus {
        color: @navbar-item-active-color;
      }
    }
  }
}

Update navbar component (color and position)
Update navbar component (color and position)
