Html Question posted in
Some basic documentation can be found here.

Chevron/Arrow Navbar in HTML CSS

So I am trying to create a simple long chevron or arrow bar, which when selected shows a border staying within the height of all unselected chevrons/arrows. I have the example below but it clips the yellow border from top and the border at bottom of chevron is completely invisible, if any CSS wizard can help with this, I would really appreciate.

html {
  font-family: sans-serif;
  font-size: 1em;
  -ms-text-size-adjust: 1em;
  -webkit-text-size-adjust: 1em;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}

#wrapper {
  width: 600px;
  margin: 50px auto;
}

ul.chevrons {
  padding: 0;
  margin: 0;
  height: 2.5em;
  font-size: 1.125em;
  background-color: #e3edf9;
  overflow: hidden;
  width: 100%;
}

ul.chevrons li {
  list-style: none;
  text-align: center;
  line-height: 2.5em;
  float: left;
}

ul.chevrons li {
  width: 25%;
  /* This changes based on how many items are in the flow. 3 items = 33% and 2 items = 50% */
}

ul.chevrons li a {
  width: 100%;
  color: #212121;
  text-decoration: none;
  display: inline-block;
  position: relative;
  text-indent: 0.75em;
}

ul.chevrons li a.selected {
  border: 1px solid yellow;
  background-color: #013e75;
  color: #fff;
}

ul.chevrons li a.previous {
  color: #6c6c6c;
}

ul.chevrons li a:before,
ul.chevrons li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  left: 100%;
}

ul.chevrons li a:before {
  border-left: 0.75em solid yellow;
  margin-left: -0px;
  z-index: 1;
}

ul.chevrons li a:after {
  border-left: 0.75em solid #e3edf9;
  margin-left: -2px;
  z-index: 2;
}

ul.chevrons li a.selected:after {
  border-left: 0.75em solid #013e75;
}

ul.chevrons li:last-child a:before,
ul.chevrons li:last-child a:after {
  display: none;
}
<div id="wrapper">
  <ul class="chevrons">
    <li><a href="#" class="previous">Step 1</a></li>
    <li><a href="#" class="selected">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
    <li><a href="#">Step 4</a></li>
  </ul>
</div>

Tried a few examples, but this is the best one I could get.

Tags:

2

Answers


  1. 0

    The bottom border is present on your a.selected item, but the a.selected item has a greater height than your ul.chevrons (which has overflow: hidden). As a result, the border is not visible.

    Adjusting the height didn’t prove effective, so instead, I removed the border attribute from a.selected and replaced it with a box-shadow. Here’s how you can style your a.selected to achieve the desired look:

    box-shadow: inset 0 2px 0 yellow, inset 0 -2px 0 yellow;
    Login or Signup to reply.
  2. 0

    I found the reason. The reason is that you set unnecessary border in the selected chevron. At the below code snipet, you set border for the selected chevrons so it makes the selected chevron doesn’t have full height like other chevrons. I just updated your code and provided. Hope it helps you.

    ul.chevrons li a.selected {
  border: 1px solid yellow;
  background-color: #013e75;
  color: #fff;
}

    html {
  font-family: sans-serif;
  font-size: 1em;
  -ms-text-size-adjust: 1em;
  -webkit-text-size-adjust: 1em;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}

#wrapper {
  width: 600px;
  margin: 50px auto;
}

ul.chevrons {
  padding: 0;
  margin: 0;
  height: 2.5em;
  font-size: 1.125em;
  background-color: #e3edf9;
  overflow: hidden;
  width: 100%;
}

ul.chevrons li {
  list-style: none;
  text-align: center;
  line-height: 2.5em;
  float: left;
}

ul.chevrons li {
  width: 25%;
  /* This changes based on how many items are in the flow. 3 items = 33% and 2 items = 50% */
}

ul.chevrons li a {
  width: 100%;
  color: #212121;
  text-decoration: none;
  display: inline-block;
  position: relative;
  text-indent: 0.75em;
}

ul.chevrons li a.selected {
  /* border: 1px solid yellow; Here is unnecessary border for selected chevron */
  background-color: #013e75;
  color: #fff;
}

ul.chevrons li a.previous {
  color: #6c6c6c;
}

ul.chevrons li a:before,
ul.chevrons li a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  left: 100%;
}

ul.chevrons li a:before {
  border-left: 0.75em solid yellow;
  margin-left: -0px;
  z-index: 1;
}

ul.chevrons li a:after {
  border-left: 0.75em solid #e3edf9;
  margin-left: -2px;
  z-index: 2;
}

ul.chevrons li a.selected:after {
  border-left: 0.75em solid #013e75;
}

ul.chevrons li:last-child a:before,
ul.chevrons li:last-child a:after {
  display: none;
}
    <div id="wrapper">
  <ul class="chevrons">
    <li><a href="#" class="previous">Step 1</a></li>
    <li><a href="#" class="selected">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
    <li><a href="#">Step 4</a></li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search