Adding elements inbetween navigation links - php

Question

I have the following code which makes/inputs my navigation into my site. The links are created through the admin panel. I want to add a '|' separator in between the links
HTML
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
functions.php
/* Register 'primary' navigation */
function wptutsplus_register_theme_menu() {
register_nav_menu('primary', 'Main Navigation Menu');
}
add_action('init', 'wptutsplus_register_theme_menu');
Current output
Link 1 Link 2 ...
Desired output
Link 1 | Link 2 ...
html
<div class='col-md-6'>
<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
</div>

Answer 1

Updated v2
You can use after parameter of wp_nav_menu(), with a small CSS trick.
Here is the code:
$menuParameters = [
'container_class' => 'main-nav',
'theme_location' => 'primary',
'menu_class' => 'my_custom_class', //<-- add this
'after' => '<span class="sep">|</span>' //<-- add this
];
wp_nav_menu($menuParameters);
Add this to you style.css
.my_custom_class li:last-child .sep{ display:none; }
Alternative way (with pure PHP approach)
$menuParameters = [
'container_class' => 'main-nav',
'theme_location' => 'primary',
'after' => '|', //<-- add this
'echo' => false //<-- add this
];
$nav_html = wp_nav_menu($menuParameters);
$needle = isset($menuParameters['after']) ? $menuParameters['after'] : '';
$index = strrpos($nav_html, $needle);
if ($index)
{
echo substr_replace($nav_html, '', $index, strlen($needle));
}
else
{
echo $nav_html;
}
All code is tested and works.
Hope this helps!

Answer 2

add the symbol |(as many as menu links you have) as u would add normally a custom link in the wordpress menu.
after that get the class or id of every element with devtools then apply this css to every one of the elements
.itemtofind{
pointer-events: none;
cursor: default;
}
you can customize the css element as you wish , add padding, color, etc.
in the past i made a web page with that feature and everything was right.
when you are in mobile apply the correct media query and hidde the symbols | with this css to the elements
display:none

Answer 3

I'm not super sure how wordpress styles their links, but this should emulate that, I don't think simply inserting the textnodes will work.
.wp-navigation {
border-right:2px solid black;
}
.wp-navigation:last-child {
border-right:none;
}

Answer 4

Use CSS. Something like this should work.
.main-nav a:after {
content: '|';
display: inline-block;
margin: 0 .5em;
}