Custom Bootstrap 4 Nav bar for application process

Question

I'm after a custom progress nav-bar for my application, something that looks like the below:

Using the following HTML and CSS it doesn't seem to work with Bootstrap 4, and I can't get it work.

HTML

<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

CSS

.nav-pills.nav-wizard > li {
  position: relative;
  overflow: visible;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}
.nav-pills.nav-wizard > li + li {
  margin-left: 0;
}
.nav-pills.nav-wizard > li:first-child {
  border-left: 0;
}
.nav-pills.nav-wizard > li:first-child a {
  border-radius: 5px 0 0 5px;
}
.nav-pills.nav-wizard > li:last-child {
  border-right: 0;
}
.nav-pills.nav-wizard > li:last-child a {
  border-radius: 0 5px 5px 0;
}
.nav-pills.nav-wizard > li a {
  border-radius: 0;
  background-color: #eee;
}
.nav-pills.nav-wizard > li:not(:last-child) a:after {
  position: absolute;
  content: "";
  top: 0px;
  right: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent #eee;
  z-index: 150;
}
.nav-pills.nav-wizard > li:not(:first-child) a:before {
  position: absolute;
  content: "";
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 20px;
  border-color: #eee #eee #eee transparent;
  z-index: 150;
}
.nav-pills.nav-wizard > li:hover:not(:last-child) a:after {
  border-color: transparent transparent transparent #aaa;
}
.nav-pills.nav-wizard > li:hover:not(:first-child) a:before {
  border-color: #aaa #aaa #aaa transparent;
}
.nav-pills.nav-wizard > li:hover a {
  background-color: #aaa;
  color: #fff;
}
.nav-pills.nav-wizard > li.active:not(:last-child) a:after {
  border-color: transparent transparent transparent #428bca;
}
.nav-pills.nav-wizard > li.active:not(:first-child) a:before {
  border-color: #428bca #428bca #428bca transparent;
}
.nav-pills.nav-wizard > li.active a {
  background-color: #428bca;
}

Mine ends up looking like:

score 0 · Answer 1 · answered Jul 30 '19 at 10:49

Using CSS clip-path

https://bennettfeely.com/clippy/

.nav-clipped .nav-link {
    padding: .5rem 1.2rem;
}

.nav-clipped .nav-item {
  -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%, 0% 0%);
  clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%, 0% 0%);
  background-color: #ddd;
  border-radius: .25rem;
}

.nav-clipped .nav-item:first-child {
  -webkit-clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 52%, 0 0);
  clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0 100%, 0 52%, 0 0);
}

.nav-clipped .nav-item:last-child {
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 15% 52%, 0 0);
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 15% 52%, 0 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-pills nav-clipped">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

score 0 · Answer 2 · answered Jul 30 '19 at 10:51

You need to add this CSS:

.nav-pills.nav-wizard > li a{
    padding: 8px 15px;
    display: -webkit-box;
}

working snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<ul class="nav nav-pills nav-wizard">
  <li class="active"><a href="#" data-toggle="tab">Home</a></li>
  <li><a href="#" data-toggle="tab">About</a></li>
  <li><a href="#" data-toggle="tab">Contact</a></li>
</ul>

<style>
  p {
    font-family: Lato;
  }
  
  .nav-pills.nav-wizard>li {
    position: relative;
    overflow: visible;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }
  
  .nav-pills.nav-wizard>li+li {
    margin-left: 0;
  }
  
  .nav-pills.nav-wizard>li:first-child {
    border-left: 0;
  }
  
  .nav-pills.nav-wizard>li:first-child a {
    border-radius: 5px 0 0 5px;
  }
  
  .nav-pills.nav-wizard>li:last-child {
    border-right: 0;
  }
  
  .nav-pills.nav-wizard>li:last-child a {
    border-radius: 0 5px 5px 0;
  }
  
  .nav-pills.nav-wizard>li a {
    border-radius: 0;
    background-color: #eee;
  }
  
  .nav-pills.nav-wizard>li:not(:last-child) a:after {
    position: absolute;
    content: "";
    top: 0px;
    right: -20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #eee;
    z-index: 150;
  }
  
  .nav-pills.nav-wizard>li:not(:first-child) a:before {
    position: absolute;
    content: "";
    top: 0px;
    left: -20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: #eee #eee #eee transparent;
    z-index: 150;
  }
  
  .nav-pills.nav-wizard>li:hover:not(:last-child) a:after {
    border-color: transparent transparent transparent #aaa;
  }
  
  .nav-pills.nav-wizard>li:hover:not(:first-child) a:before {
    border-color: #aaa #aaa #aaa transparent;
  }
  
  .nav-pills.nav-wizard>li:hover a {
    background-color: #aaa;
    color: #fff;
  }
  
  .nav-pills.nav-wizard>li.active:not(:last-child) a:after {
    border-color: transparent transparent transparent #428bca;
  }
  
  .nav-pills.nav-wizard>li.active:not(:first-child) a:before {
    border-color: #428bca #428bca #428bca transparent;
  }
  
  .nav-pills.nav-wizard>li.active a {
    background-color: #428bca;
  }
  
  .nav-pills.nav-wizard>li a {
    padding: 8px 15px;
    display: -webkit-box;
  }
</style>

Custom Bootstrap 4 Nav bar for application process

2 Answers2