Bootstrap Navbar - menu item

Question

I am working on Bootstrap and I have a requirement similar to the image below ...

Online demo

Demand

I can get everything except the height of the border. The height of the border should not start at the top and end at the bottom. But the difficult part: the total height must be clickable ...: (

What i get

HTML

<nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </nav> 

CSS

 .navbar-default{background:#005986;} .navbar{border:0;border-radius:0;} ul.nav{border-right:1px solid #84B6D0;} ul.nav li a{border-left:1px solid #84B6D0;color:#fff; } .navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{color:#fff;} .navbar-default .navbar-nav>li>a:hover{background:#022E44;} 

Answer 1

You can use psuedo-element after and before to achieve this.

 .navbar-default { background: #005986; } .navbar { border: 0; border-radius: 0; } ul.nav { list-style: none; border-right: 1px solid #84B6D0; } ul.nav li { padding: 20px 0; display: inline-block; } ul.nav li a { padding: 20px 10px; color: #fff; position: relative; } ul.nav li a:after { position: absolute; content: ""; width: 2px; height: 60%; right: 0; background: #fff; top: 50%; transform: translate(0, -50%); } ul.nav li:first-child a:before { position: absolute; content: ""; width: 2px; height: 60%; left: 0; background: #fff; top: 50%; transform: translate(0, -50%); } .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #fff; } .navbar-default .navbar-nav>li>a:hover { background: #022E44; } 

 <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="#">Link 1</a> </li> <li><a href="#">Link 2</a> </li> <li><a href="#">Link 3</a> </li> <li><a href="#">Link 4</a> </li> </ul> </div> </nav> 

Answer 2

 .navbar-default { background: #005986; } .navbar { border: 0; border-radius: 0; } ul.nav li:last-child a { border-right: 1px solid #84B6D0; color: #fff; margin-top: 10px; margin-bottom: 10px; } ul.nav li a { border-left: 1px solid #84B6D0; color: #fff; margin-top: 10px; margin-bottom: 10px; } .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #fff; } .navbar-default .navbar-nav>li>a:hover { background: #022E44; } 

Answer 3

  ul.nav { border-right: 1px solid #84B6D0; margin: 9px 0px; } 

you can check the script: http://jsfiddle.net/Khumesh/7t5wxmnj/