Help with selector to add pipe between menu items

You have the after pseudo-class in the wrong place in your CSS code. It is the lowest point where something can come because in HTML there are no other elements below it. With you there is still an “a”.

Correct would be:

.main-navigation .primary-menu-container > ul > li.menu-item a:after {
 content:"|"; color: #515151;
}

if you want to insert the pipe after the links. Or

.main-navigation .primary-menu-container > ul > li.menu-item:after {
 content:"|"; color: #515151;
}

if you want it to come after the list item. In any case you have to work on the spacing (via padding or margin).

Thanks for the advice and link. That’s got me moving again.