How do I add vertical bars ( | ) between navigation menu items? Version 7.0 Brine Template

I am trying to locate custom CSS to be able to add vertical bars between my navigation menu.  I am using the Brine template.

Example:

SHOP  |  CONTACT  |  BLOG

Add the following to Design > Custom CSS.

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item {

  margin-right: 0;
  
  }

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item:after {

  content: '|';
  margin-left: 0.618em;
  margin-right: 0;
  
  }

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item:last-child:after {

  display: none;
  
  }

Let us know how it goes.

8 hours ago, creedon said:

Add the following to Design > Custom CSS.

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item {

  margin-right: 0;
  
  }

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item:after {

  content: '|';
  margin-left: 0.618em;
  margin-right: 0;
  
  }

body:not( .tweak-header-primary-nav-hover-style-button ) .Header-nav--primary .Header-nav-item:last-child:after {

  display: none;
  
  }

Let us know how it goes.

Thank you so much, creedon!  It worked perfectly :)