Border Between Navigation Items

The code provided below will allow you to place any text or HTML entity between the items in your primary navigation menu.

The code is setup to put a pipe between your items, but you can switch that out inside the “content” line in the CSS.

.main-navigation .main-nav > ul > li:not(:last-child) {
  position: relative;
}

 .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
  content: "|";
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

You may want to put this inside a media query so it does not appear on your mobile navigation.