Using flexbox for navigation menu using pseudo :before is splitting it in two lines
<p>Using media-query and flexbox with 2 break points was working fine, before I've added the :before content to split it with "|":</p>

<pre><code>.navigation li+li:before {
    content: '/ ';
} 
</code></pre>

<p><a href="https://jsfiddle.net/jk37gbpn/2/" rel="nofollow">JsFiddle</a></p>

<p>How can I  make it stay  in-line with the rest of the menu?</p>