Bootstrap Vertical Divider
https://stackoverflow.com/questions/19203816/vertical-divider-doesnt-work-in-bootstrap-3
Note: this is not available in Bootstrap, was removed
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!-- <li><a href="#">Home</a></li> -->
<li><a href="{{ route('project.show') }}"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> Projects</a></li>
<li><a href="{{ route('project.create') }}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create new Project</a></li>
<li class="divider-vertical"></li>
<li><a href="{{ route('task.show') }}"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Tasks</a></li>
<li><a href="{{ route('task.create') }}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create new Task</a></li>
</ul>
</div><!-- /.navbar-collapse -->
<style>
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #8d8d8d;
border-left: 1px solid #8d8d8d;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
@media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
</style>