hugo-academic/assets/scss/academic/_nav.scss

/*************************************************
 *  Navigation bar
 **************************************************/

.navbar {
  height: 70px;
  background: $sta-menu-primary;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11);
  font-size: #{$sta-font-size-small}px;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;

  @include media-breakpoint-down(md) {
    height: 50px;

    .navbar-nav-scroll {
      width: 100%;
      overflow: hidden;

      .navbar-nav {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    }
  }

  .navbar-nav {
    display: flex;

    .nav-link {
      color: rgba($sta-menu-text, .85);

      &.active,
      &:hover,
      &:focus {
        color: $sta-menu-text;
      }

      &.active {
        font-weight: bold !important;
      }
    }
  }

  .dropdown-menu {
    font-size: #{$sta-font-size-small}px;
  }

  .dropdown-item.active {
    font-weight: bold;
  }

}

.dark .navbar {
  box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11);
}

// Remove Bootstrap's border from Toggle button.
.navbar-toggler {
  border: 0 !important;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none !important;
  box-shadow: none !important;
}

@include media-breakpoint-down(md) {  /* Match breakpoint for i18n dropdown in navbar.html. */
  .i18n-dropdown .nav-link::after {
    content: none;
  }
  .i18n-dropdown .dropdown-menu {
    /* Use style from uncollapsable dropdowns to prevent dropdown going off page. */
    position: absolute;
    /* Below style from .dropdown-menu-right to prevent dropdown going off page. */
    right: 0;
    left: auto;
  }
}

// Allow user to horizontally scroll.
// Commented out this feature as it causes dropdowns to appear within the menu bar.
// TODO: re-enable in a way that doesn't break dropdowns.
/*
.navbar .collapse {
  overflow-x: auto;
}
*/

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  font-weight: bold;
}

.navbar-brand img {
  max-height: 60px;
  max-width: fit-content;  /* Otherwise logo disappears at some responsive sizes. */
}

#navbar-main .main-menu-item ul li .nav-link {
  color: $sta-menu-text;
}

@include media-breakpoint-down(md) {
  .navbar-brand img {
    max-height: 40px;
  }
  .navbar-brand {
    max-width: 100px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    display: inline-block;
  }
  .navbar-toggler {
    border-color: transparent;  // Remove Bootstrap's border from Toggle button.
  }
  #navbar-main .main-menu-item {
    text-align: left !important;
    padding-left: 0;
  }
  .navbar-collapse {
    z-index: 9999 !important;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    background-color: $sta-menu-primary;
    text-align: center !important;
  }
  #navbar-main .main-menu-item .nav-item {
    padding: 10px 15px !important;
  }
  #navbar-main .main-menu-item .nav-item .nav-link {
    padding: 5px 15px !important;
  }
}

ul.nav-icons {
  list-style-type: none;
  font-size: 18px;
  padding: 0.5rem 0 0.5rem 0;
  margin: 0;
}

ul.nav-icons li {
  display: inline;
  padding-right: 1rem;
}

ul.nav-icons li:last-of-type {
  padding-right: 0;
}

ul.nav-icons li.nav-item a.nav-link {
  padding: 0;
}

.dropdown-menu {
  background-color: $sta-menu-primary !important;
  color: $sta-menu-text !important;
}

.dropdown-item {
  background-color: $sta-menu-primary !important;
  color: $sta-menu-text !important;
}