Esraa Osama Esraa Osama - 1 year ago 100
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>

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 Source

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{
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download