navbar.less

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

body {
  // Fix horizontal scrolling on iOS devices.
  // https://www.drupal.org/node/1870076
  position: relative;

  &.navbar-is-static-top {
    margin-top: 0;
  }
  &.navbar-is-fixed-top {
    margin-top: (@navbar-height + (@grid-gutter-width / 2));
  }
  &.navbar-is-fixed-bottom {
    padding-bottom: (@navbar-height + (@grid-gutter-width / 2));
  }

  @media @tablet {
    margin-top: (@grid-gutter-width / 2);
  }
  @media @mobile {
    &.toolbar-vertical {
      &.navbar-is-fixed-top,
      &.navbar-is-fixed-bottom {
        .toolbar-bar {
          position: fixed;
        }
        header {
          z-index: 500;
        }
      }
      // Default toolbar fixed height value.
      // @see core/modules/toolbar/css/toolbar.icons.theme.css@261
      &.navbar-is-fixed-top header {
        top: 39px;
      }
    }
  }
}
.navbar.container {
  @media @tablet {
    max-width: ((@container-sm - @grid-gutter-width));
  }
  @media @normal {
    max-width: ((@container-md - @grid-gutter-width));
  }
  @media @wide {
    max-width: ((@container-lg - @grid-gutter-width));
  }
}

// Branding.
.navbar .logo {
  margin-right: -(@grid-gutter-width / 2);
  padding-left: (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @media @grid-breakpoint {
    margin-right: 0;
    padding-left: 0;
  }
}