Responsive CSS Divider in Nav Bar

Responsive CSS separator line in nav bar (navigation bar). The CSS divider is vertical on tablet/desktop/wide screen and becomes horizontal on mobile/small screen.

Demo: See navbar of this webpage!

The CSS divider is used to separate items in responsive navbar [2].

HTML:

<span class="vertical-divider"></span>

SCSS: You can compile the SCSS code online.

$mobile: 768px;

.vertical-divider {
  align-items: center;
  display: flex;
  margin: 0.5rem 0.25rem;
  border-right: 2px solid #fafafa;
  border-left: 2px solid #b4b4b4;
  @media (max-width: $mobile) {
    border-top: 2px solid #fafafa;
    border-bottom: 2px solid #b4b4b4;
    margin: 0;
  }
}

Tested on: Chromium Version 57.0.2987.98 Built on Ubuntu , running on Ubuntu 17.04 (64-bit)