.nav-wrapper.container
  .nav
    - for (var x = 0; x < 8; x++)
      .dropdown
        a Category
View Compiled
@mixin screen-min($min) { @media (min-width: $min) { @content } };

/* Global Base Styles and Resets */
* {
  box-sizing: border-box;
}
body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/867725/black-wood-small.jpg);
  color: white;
}
/* Bootstrap features for responsiveness */
.container {
  margin: 0 auto;
  width: 100%;
  @include screen-min(768px){max-width: 750px;}
  @include screen-min(992px){max-width: 970px;}
  @include screen-min(1200px){max-width: 1170px;}
}

/* THE BASIC NAVBAR ONLY */
.nav-wrapper {
  background-color: grey;
}
.nav {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.dropdown {
  width: 100%;
  border-right: 1px solid black;
  &:last-of-type {
    border-right: none;
  }
}
a {
  color: white;
  width: 100%;
  display: block; /* No default display values for anchors */
  padding: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.