Esraa Osama Esraa Osama - 28 days ago 22
CSS Question

adding vertical divider on main menu

how can i add vertical divider after the li element on the main menu



<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a></li>
<li><a href="#" > نبذه عنا </a></li>
<li><a href="#"> اكادمية بوذيب للفروسيه </a></li>
<li><a href="#"> اسطابلات بوذيب </a></li>
<li><a href="#"> المركز الاعلامي </a></li>
<li><a href="#"> اتصل بنا </a></li>
<li><a href="#"> اكثر <i class="fa fa-bars"></i> </a></li>
<li><a href="#"> </a></li>
</ul>





this is the site i want to fix it the site

and this is the image i want the main menu to be like it the image

can any one help me ??

thank you

Answer

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;
}