.nav {
  composes: root from '../../components/Container/Container.css';
  background: var(--color-white);
  composes: bs from '../../globals/modifiers.css';
  width: 100%;
  padding: 0;
  position: absolute;;
  z-index: 60;
}
.nav ul {
  list-style: none;
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.5em;
  color: var(--color-grey-light);
  cursor: pointer;
}
.nav a:hover {
  color: var(--color-red);
}
.nav :global a.active {
  color: var(--color-red);
  box-shadow: inset 0 -3px 0 var(--color-red);
}

.nav .home :global a.active {
  box-shadow: none;
  color: var(--color-grey);
}

.isFixed {
  position: fixed;
  top: 0;
  left: 0;
}

.nav {
  composes: root from '../../components/Container/Container.css';
  background: var(--color-white);
  composes: bs from '../../globals/modifiers.css';
  width: 100%;
  padding: 0;
  position: absolute;;
  z-index: 60;
}
.nav ul {
  list-style: none;
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  white-space: nowrap;
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.nav li {
  display: inline-block;
}
.nav a {
  display: block;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.8em;
  padding: 0.5em;
  color: var(--color-grey-light);
  cursor: pointer;
}
.nav a:hover {
  color: var(--color-red);
}
.nav :global a.active {
  color: var(--color-red);
  box-shadow: inset 0 -3px 0 var(--color-red);
}

.nav .home :global a.active {
  box-shadow: none;
  color: var(--color-grey);
}

.isFixed {
  position: fixed;
  top: 0;
  left: 0;
}

Improve styleguide nav on small screens
Improve styleguide nav on small screens
