CODEWITHSUNDEEP
htmlcss
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26192

How to get rid of the border bottom from my navigation

Here is the image of my current navigation what I have :

enter image description here

Here is how I want it to be :

enter image description here

The main issue to me looks like when my ul has border-bottom set and I cannot put my li over it for some reason, I'm stuck and really have no idea what to try further. Here is my css so far :

#section-body ul.tablenavigation {
  font-family: "Helvetica Neue",Helvetica Neue,Helvetica,Arial,sans-serif;
  list-style-type: none;
  position: relative;
  text-align: left;
  font-size: 19.4px;
  margin: 0px;
  padding: 0px 20px 0px 3px;
  color:#6a6a6a;
  background-color:#f4f4f4;
  border-bottom: 1px solid #ddd;
  width: 1825px;
}

#section-body ul.tablenavigation li {
  display: inline-block;
  padding: 20px 25px 20px 25px;
  margin: 0px 0px 0px -5px;
  border-right: 1px solid #fff;
}

#section-body ul.tablenavigation li a{
 color:#6a6a6a;
}

#section-body ul.tablenavigation li a:hover{
 color:#969696;
}

#section-body ul.tablenavigation li.active {
  color:#d4c58b;
  background-color: #fff;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

HTML :

<ul class="tablenavigation cps-tablenavigation">
                            <li><a href="#">DELIVERY</a></li>
                            <li><a href="#">ITEMS</a></li>
                            <li class="active"><a href="#">BILLING</a></li>
                            <li><a href="#">PERFORMANCE</a></li>
</ul>

What can I do to make this border under the BILLING invisible or somehow get this white background over the border.

Upvotes: 0

Views: 129

Answers (2)

Adrift
Adrift

Reputation: 59769

Since you can't apply the bottom border to the list-items individually, you can use the vertical offset value of the box-shadow property and specify a color of white to overlap the red bottom border for the third list-item.

.tablenavigation li {
display: inline-block;
}

.tablenavigation li.active {
display: inline-block; 
box-shadow: 0 01px white;
}

jsFiddle

Upvotes: 1

km6zla
km6zla

Reputation: 4877

Here is the css

#section-body ul.tablenavigation li.active {
    color:#d4c58b;
    background-color: #fff;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    top:1px;
    position: relative;
}

and here is the fiddle

Upvotes: 1

Related Questions