Adding a | to the nav bar - html

Question

I've seen some posts but, I can't figure it out on my specific lines of code. Can anyone help me add a | between 'About Us' and 'Login' I'm just trying to separate them using a '|'and I'm not exactly sure how to tweak my code to make that happen?
HTML
color:rgba(152,226,80,0.6); font-family: 'Bahnschrift Regular';" title="This Header is rendered by /app/_layout/site-header/site-header.component.html">
<div id="logo">
<a href="/index.html">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" style="color:White;" >Home</a>
</li>
<li class="nav-item">
<div class="dropdown">
<li class="dropbtn">Services</li>
<div class="dropdown-content">
<a href="/carmaintenance" style="text-align:center">Car Maintenance
______________________
</a>
<a href="/gogreenseminars" style="text-align:center">Go Green Seminars
______________________
</a>
<a href="/microgridresources" style="text-align:center">Microgrid Resources
______________________
</a>
<a href="/gardeningtogether" style="text-align:center">Gardening Together
______________________
</a>
<a href="/volunteering" style="text-align:center">Volunteering and Activism
______________________
</a>
<a href="/recyclingefforts" style="text-align:center">Recycling Efforts
______________________
</a>
<a href="/inhousevegancafe" style="text-align:center;">In-House Vegan Cafe
</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard"style="color:White;">Membership Plans</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
</ul>
</div>
</nav>
CSS
/* Position the navbar container inside the image */
/*.container {
position: absolute;
margin: 20px;
width: auto;
top:3%;
left:1%;
}
*/
/* The navbar */
.topnav {
overflow: hidden;
background-color: rgba(152,226,80,0.6);
}
/* Navbar links */
.topnav a {
float: right;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 16px;
}
.nav-link
{
/*background-color:;*/
font-weight: bolder;
color: white;
font-size: 125%;
align-items:center;
text-align:center;
float: left;
display: block;
margin-left: 65px;
margin-right:5px;
}
.navbar {
float: left;
width:66%;
height:8%;
opacity:1;
border-radius:15px 0px 0px 15px;
padding-left: 0%;
top:3%;
left:1%;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Dropdown Button */
.dropbtn {
background-color: rgba(152,226,80,0.0);
color: white;
padding: 8px;
font-size: 125%;
border: none;
font-weight:bolder;
margin-left:65px;
margin-right:5px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 90px;
box-shadow: 0px 0px 0px 0px rgba(152,226,80,0.0);
z-index: 1;
text-align:center;
padding-left:20px;
padding-top:13px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #FFFFFF;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color : rgba(152,226,80,0.6);
font-weight:bolder;
margin-top: -10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
/* Change color of dropdown links on hover */
//.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
//.dropdown:hover .dropbtn {background-color: #3e8e41;}
#font-face {
font-family: 'Bahnschrift Regular';
font-style: normal;
font-weight:bolder;
src: local('Bahnschrift Regular'), url('BAHNSCHRIFT 1.woff') format('woff');
}
Any help would be nice and thank you in advance!

Answer 1

You can do this with either a border-left on the last li using :last-child a pseudo-element or a placed content using the :before pseduo-element. Note that by adding pseudo-elements - they are added as the first-child of the selected element. That may play a role in other styling issues.
EDIT - following my comment above - the only valid child of a ul is an li so you should amend your HTMLstructure to ensure that any divs / dropdowns etc are children of an li - not of the parent ul.
Thank you to #dale landry for the code skeleton used below :)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by using a :before pseudo element
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
or by simply adding aen element that is the same height as the entire li as a divider:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
And if you don't want to rely on the :last-child pseudo-selector - you can achieve the same by adding a class to the last item
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
And if you want the divider between every li - but not to the right of the last one then you can use the direct sibling combinator "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
or by using a :before pseudo element
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}

Answer 2

Why dont you add span in your li element of About us like following:
<li class="nav-item">
<a class="nav-link" routerLink="/about" style="color:White;">About Us</a>
<span>|</span>
</li>

Answer 3

Simply wrap a bar in a list item tag in line with your nav at the spot you wish to have one. See my snipit. Now it is semantically valid code
.flex-box {
display: flex;
}
li,
.nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 4px;
color: black;
}
.bar {
font-weight: bold;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<li class="dropbtn">Services</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="bar">|</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>