Bootstrap Navbar - Menu Items border issue

Question

I am working on Bootstrap and I got requirement like below image...

Online Demo

Requirement

I am able to get everything, except border height. Border height should not be coming from Top and end at Bottom. But the tricky part is, Total height should be clickable... :(

What I am getting

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

Akshay · Accepted Answer · 2015-10-13 06:48:35Z

5

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>

answered Oct 13, 2015 at 6:48

Akshay

14.4k5 gold badges49 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reddy Over a year ago

@Akshay... Excellent.. this is what exactly I want... Thanks for saving my day

Akshay Over a year ago

np @Reddy glad i could help

Apurva Prajapati · Accepted Answer · 2015-10-13 07:55:19Z

1

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

edited Oct 13, 2015 at 7:55

answered Oct 13, 2015 at 6:52

Apurva Prajapati

525 bronze badges

Comments

Ram Khumana · Accepted Answer · 2015-10-13 06:48:48Z

-1

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

you can check on fiddle: http://jsfiddle.net/Khumesh/7t5wxmnj/

answered Oct 13, 2015 at 6:48

Ram Khumana

8426 silver badges14 bronze badges

1 Comment

Reddy Over a year ago

Sorry @Khumesh, clickable area is missing

Collectives™ on Stack Overflow

Bootstrap Navbar - Menu Items border issue

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related