adding vertical divider on main menu - html

Question

How can I add vertical divider after the li element on the main menu?
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
<li> </li>
</ul>
This is the site I want to fix: the site
And this is the image I want the main menu to be like: the image
Can any one help me?

Answer 1

Although you could try this by giving border to sides, but nav items have more height than vertical line that you want to give, then you can try <pseudo:before> to achive this
.navbar-default .navbar-nav>li>a:after {
content: '';
display: inline-block;
position: absolute;
width: 1px;
background: #fff;
height: 30px;
right: 0;
top: calc(50% - 15px);
}
.navbar-default .navbar-nav>li:last-child>a:after,
.navbar-default .navbar-nav>li:first-child>a:after{
display:none;
}

Answer 2

Try this one
ul li{
float:left;
list-style:none;
padding:0 8px;
border-right:2px solid gray;
}
ul li:last-child{
border:none;
}
a{
text-decoration:none;
}
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> <span class="sr-only">(current)</span></li>
<li><a href="#" > نبذه عنا </a></li>
<li> اكادمية بوذيب للفروسيه </li>
<li> اسطابلات بوذيب </li>
<li> المركز الاعلامي </li>
<li> اتصل بنا </li>
<li> اكثر <i class="fa fa-bars"></i> </li>
</ul>