@media (min-width: 767px) {
    ul.nav > li:not(:first-child):before {
        content: '';
        height: 40px;
        width: 1px;

        position: absolute;
        top: 5px;
        left: 0px; /* this is somehow needed to have the vertical lines correct in case of navbar-center */
        background-color: #ED7102;
    }
}

@media (max-width: 767px) {
    ul.nav li a {
        margin-left: 0px;
    }
}

ul.nav li a::before {
    position: absolute;
    content: '';
    height: 4px;
    left: 50%;
    right: 50%;
    bottom: -1px;
    opacity: 1;
    background: #ED7102;
    -webkit-transition: left .2s ease-in 50ms, right .2s ease-in 50ms, opacity 70ms ease 50ms;
    transition: left .2s ease-in 50ms, right .2s ease-in 50ms, opacity 70ms ease 50ms;
}

ul.nav li a:hover::before {
    left: 0;
    right: 0;
}

ul.nav li.active a::before {
    left: 0;
    right: 0;
}

ul.nav li:first-of-type a {
    margin-left: 0;
}